Filling a table row
<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 add-on looks like. See how inside td is not affected. What solution? 
The trick is to give an addition to the td elements, but to make an exception for the first (yes, this is hacked, but sometimes you have to play by the rules of the browser):
td { padding-top:20px; padding-bottom:20px; padding-right:20px; } td:first-child { padding-left:20px; padding-right:0; } Primary child is relatively well supported: https://developer.mozilla.org/en-US/docs/CSS/:first-child
You can use the same arguments to fill horizontally with tr:first-child td .
Alternatively, exclude the first column using the not operator . However, support for this is not so good.
td:not(:first-child) { padding-top:20px; padding-bottom:20px; padding-right:20px; } In the CSS 1 and CSS 2 specifications, padding was available for all elements, including <tr> . However, add-on support for table-row ( <tr> ) has been removed in the CSS 2.1 and CSS 3 specifications. I never found the cause of this annoying change, which also affects the margin property and several other table elements (header, footer, and columns).
Update: in February 2015, this thread at the www-style@w3c.org mailing list www-style@w3c.org discussed the addition of padding and border support for the row table. This would apply the standard box model to the table-row and table-column elements. This would allow such examples . The flow seems to suggest that table-row firmware support never existed in CSS standards, as it would have complex layout mechanisms. In the editor , September 30, 2014. The draft basic CSS CSS base model, spacer and border properties exist for all elements, including table-row and table-column elements. If it eventually becomes a W3C recommendation, your html + css example might work as intended in browsers.
enter td padding
Option 1
You can also solve this problem by adding a transparent border to the (tr) line, for example
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; } It works like a charm, although if you need regular boundaries then this method, unfortunately, will not work.
Option 2
Since rows act as a way to group cells, the right way to do this would be to use
table { border-collapse: inherit; border-spacing: 0 10px; } You can simply add this style to the table.
table { border-spacing: 15px; } This is a very old post, but I thought I should post a solution to a similar problem that I have recently encountered.
The answer . I solved this problem by showing the tr element as a block element, i.e. specifying a CSS display: block for the tr element. You can see this in the code example below.
<style> tr { display: block; padding-bottom: 20px; } table { border: 1px solid red; } </style> <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> <br> <br>This TEXT IS BELOW and OUTSIDE the TABLE element. NOTICE how the red table border is pushed down below the end of paragraph due to bottom padding being specified for the tr element. The key point here is that the tr element must be displayed as a block in order for padding to apply at the tr level. Just write the following code in a CSS file
td{ padding: 10px; { <p> inside <td> will mess up the formatting. Try to remove it.