126
<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

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Spencer
  • 4,018
  • 10
  • 33
  • 43

7 Answers7

173

The trick is to give padding on the td elements, but make an exception for the first (yes, it's hacky, but sometimes you have to play by the browser's rules):

td {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;   
}

td:first-child {
  padding-left:20px;
  padding-right:0;
}

First-child is relatively well supported: https://developer.mozilla.org/en-US/docs/CSS/:first-child

You can use the same reasoning for the horizontal padding by using tr:first-child td.

Alternatively, exclude the first column by using the not operator. Support for this is not as good right now, though. 

td:not(:first-child) {
  padding-top:20px;
  padding-bottom:20px;
  padding-right:20px;       
}
SharpC
  • 6,974
  • 4
  • 45
  • 40
Joeri Hendrickx
  • 16,947
  • 4
  • 41
  • 53
  • I would use :not operator for excluding a single item. like tr:not(#first_row) – jeff Oct 03 '13 at 20:44
  • @CengizFrostclaw indeed, that would be more consise. But support is not as good. – Joeri Hendrickx Oct 04 '13 at 08:00
  • Oh, you may be right. I don't know, it just makes sense to believe that :not operator is a more supported one, but again, I only test in Chrome :D – jeff Oct 04 '13 at 08:07
  • 9
    this is not 'hacky', this is exactly what these selectors are designed for – spinners May 21 '14 at 18:08
  • @spinners this is hacky. It does not work with RTL layout. Create dummy ``s. – Adam Leggett Feb 14 '18 at 18:10
  • 2
    @AdamLeggett adding non-semantic html is always the last resort. You can adapt the rule for rtl content by using the `:dir(rtl)` pseudoclass (I would add it to the answer but I did not actually test this) – Joeri Hendrickx Mar 19 '18 at 19:25
  • @JoeriHendrickx `:dir(rtl)` is only supported on Firefox. You could wrap in `html(dir=rtl)` but this is just as hacky as non-semantic HTML. – Adam Leggett Mar 20 '18 at 16:37
  • Assuming you already need the dir attribute at the top level, adding that to your css selector sounds pretty sane to me. – Joeri Hendrickx Mar 21 '18 at 09:28
  • @JoeriHendrickx I am not happy with assuming the `html` element will have this attribute. – Adam Leggett Mar 27 '18 at 16:10
46

In CSS 1 and CSS 2 specifications, padding was available for all elements including <tr>. Yet support of padding for table-row (<tr>) has been removed in CSS 2.1 and CSS 3 specifications. I have never found the reason behind this annoying change which also affect margin property and a few other table elements (header, footer, and columns).

Update: in Feb 2015, this thread on the www-style@w3c.org mailing list discussed about adding support of padding and border for table-row. This would apply the standard box model also to table-row and table-column elements. It would permit such examples. The thread seems to suggest that table-row padding support never existed in CSS standards because it would have complicated layout engines. In the 30 September 2014 Editor's Draft of CSS basic box model, padding 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 may work as intended in browsers at last.

SharpC
  • 6,974
  • 4
  • 45
  • 40
Futal
  • 939
  • 8
  • 9
19

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;
}
Karl Johan Vallner
  • 3,980
  • 4
  • 35
  • 46
  • 1
    This one should be the accepted answer based on the question. It's not always straight forward to add padding to columns (td) (and might be headers (th) as well). This answers the question more accurately. The assumption is often that the OP can modify the HTM, but with visual builders and CMS having such prominence, that's often not the case. Upvoted – Mike A Jan 17 '21 at 11:45
  • 1
    One more thing. Better I think would be ``border-collapse: collapse`` rather than ``inherit`` – Mike A Jan 17 '21 at 11:54
  • @MikeA That will not help because `border-spacing` only works for `separate` borders. – Rahul Purohit Dec 20 '22 at 13:08
8

give the td padding

Moin Zaman
  • 25,281
  • 6
  • 70
  • 74
3

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; }

Chris Pink
  • 1,558
  • 1
  • 15
  • 28
-2

You could simply add this style to the table.

table {
    border-spacing: 15px;
}
fhcimolin
  • 616
  • 1
  • 8
  • 27
Ifesinachi Bryan
  • 2,240
  • 1
  • 19
  • 20
-4

This is a very old post, but I thought I should post my solution of a similar problem I faced recently.

Answer : I solved this issue by displaying the tr element as a block element i.e. specifying a CSS of display:block for the tr element. You can see this in code sample 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.
Sunil
  • 20,653
  • 28
  • 112
  • 197
  • 10
    This totally screws with how table layout usually works. If you're doing this, you shouldn't be using a table - use a regular `div`. – caesay Oct 18 '17 at 03:58