Padding a table row

user_336528 0
Viewed 291481
<html>
    <head>
        <title>Table Row Padding Issue</title>
        <style type="text/css">
            tr {
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>
                        <h2>Lorem Ipsum</h2>
                        <p>Fusce sodales lorem nec magna iaculis a fermentum lacus facilisis. Curabitur sodales risus sit amet
                        neque fringilla feugiat. Ut tellus nulla, bibendum at faucibus ut, convallis eget neque. In hac habitasse 
                        platea dictumst. Nullam elit enim, gravida eu blandit ut, pellentesque nec turpis. Proin faucibus, sem sed 
                        tempor auctor, ipsum velit pellentesque lorem, ut semper lorem eros ac eros. Vivamus mi urna, tempus vitae 
                        mattis eget, pretium sit amet sapien. Curabitur viverra lacus non tortor luctus vitae euismod purus 
                        hendrerit. Praesent ut venenatis eros. Nulla a ligula erat. Mauris lobortis tempus nulla non 
                        scelerisque.</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Here's what the padding looks like. See how the td inside isn't affected. What's the solution? Table Row Padding Issue

row html-table padding css html
7 Answers

Option 1

You could also solve it by adding a transparent border to the row (tr), like this

HTML

<table>
    <tr> 
         <td>1</td>
    </tr>
    <tr> 
         <td>2</td>
    </tr>
</table>

CSS

tr {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

Works like a charm, although if you need regular borders, then this method will sadly not work.

Option 2

Since rows act as a way to group cells, the correct way to do this, would be to use

table {
    border-collapse: inherit;
    border-spacing: 0 10px;
}
user_17025920

Add a before element:

tr::before {
  content: "";
  margin-left: 10px;
}

It was important to me in the context of 'responsive' tables, ie td {display: table-row; }

user_30094410

You could simply add this style to the table.

table {
    border-spacing: 15px;
}
user_84806250
Related