18

This is more of a "tell me why it doesn't work" instead of "help me fix it" question. If I try to apply padding to a thead or tr element within a table, it doesn't work. The only way padding works is if I apply it directly to the th or td element. Why is this so? Is there an easy way to apply padding to the entire thead or tr or is adding it to the th and td the only option?

<table>
    <thead>
        <tr>
            <th>Destination</th>
            <th>Size</th>
            <th>Home Value</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>test 1</td>
            <td>test 2</td>
            <td>test 3</td>
        </tr>
    </tbody>
</table>

Notice the 10px of padding on the thead.

table {
    width: 100%;
}

thead {
    text-align: left;
    background-color: yellow;
    padding: 10px;
}

http://jsfiddle.net/5VQB7/

2
  • theads and trs cannot have padding by definition. What do you expect it to look like?
    – BoltClock
    Mar 24, 2013 at 6:55
  • 1
    I don't really understand the approach. You end up with a padding of the maximum of any TD, regardless of any others, so you can specify multiple different paddings on TD, which is nonsense. It would seem to be more logically applied to TR in my view. Jan 14, 2014 at 22:01

7 Answers 7

26

http://www.w3.org/TR/CSS2/box.html#propdef-padding

'padding'

Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column

8

Try placing the padding in the th element instead. Typically you want to add padding to the th or td element, depending on the circumstance.

thead th {
  padding: 10px;
}
5

Relevant part of CSS2.1: Tables

Please have a look at this diagram: table layers. padding can only be applied to table as a whole or th and td cells afaik. Not to forget caption also. Other layers are complicated enough in the various table layout algorithms not to have padding applied to them ^^

Here's a fiddle http://jsfiddle.net/QB97d/1/ showing other properties you can play with.

  • border-spacing: 8px 10px; is like a margin around each cell of a table. Get rid of it with border-collapse: collapse;
  • table-layout: fixed; will trigger a completely different algorithm ("render widths as I tell you to, don't care about the relative quantity of content in each cell anymore")
  • border is another way of giving space around elements, around padding
  • empty-cells: hide may trigger special behavior

Not shown in this fiddle:

  • playing with selectors to select the 4 corners of a table in IE9+ with a thead element and unknown type of cell in each corner (I'll let you find the 4 edges ;) ):

    • thead th:first-child, thead td:first-child,
    • thead th:last-child, thead td:last-child,
    • tbody:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child
    • tbody:last-child tr:last-child th:last-child, tbody:last-child tr:last-child td:last-child
  • box-sizing: border-box (and its vendor prefixes) for calculating cell widths taking into account padding and border widths (like IE6 did in Quirks mode, oh irony...)

2
  • The behavior dates back to IE5, which is what's being emulated in quirks mode in IE6 and newer.
    – BoltClock
    Mar 24, 2013 at 9:51
  • Thanks @BoltClock . Makes sense as IE6 has both modes
    – FelipeAls
    Mar 24, 2013 at 9:55
4

Padding between thead and tbody

Unfortunately, padding is not available for thead, tbody nor tr.

Nonetheless, more padding between thead and tbody can be achieved by selecting the data cells of the first row of the table body:

tbody tr:first-child td {
    padding-top: 2.5ex;
}

Doing so, preserves the relative position of any header borders.

1

thead don't support css attribute "padding" if you need apply css in thead then css modify like :

thead tr th {
    text-align: left;
    background-color: yellow;
    padding: 10px;
}

Or

th {
    text-align: left;
    background-color: yellow;
    padding: 10px;
}
0

paddling left & right would always work for td or th as well.

But, in case of padding-top & padding-bottom, you are asking the td (or th) to increase it's height. Then what about the siblings?? What do you expect to happen??

Hence for padding top or bottom to work, you apply to it's parent which is the row of cells.

0

because tags like and they are not meant to populate the table, but to contain other elements. lets make it clear : if you want to add header to your table, you wont insert it in , instead you will add it inside , and the same for , if you want to populate data inside a table, you will need to insert them inside

i hope this answer clarify your question

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.