CODEWITHSUNDEEP
htmlcss
Adam Robertson
Adam Robertson

Reputation: 567

Why isn't padding applied to table elements?

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/

Upvotes: 20

Views: 33428

Answers (7)

Serge Stroobandt
Serge Stroobandt

Reputation: 31518

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.

Upvotes: 5

FelipeAls
FelipeAls

Reputation: 22171

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...)

Upvotes: 5

mostafa khansa
mostafa khansa

Reputation: 302

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

Upvotes: 0

j__m
j__m

Reputation: 9625

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

Upvotes: 27

loxxy
loxxy

Reputation: 13151

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.

Upvotes: 1

Aiias
Aiias

Reputation: 4748

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

Upvotes: 8

Syed Ahmed
Syed Ahmed

Reputation: 1645

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

Upvotes: 1

Related Questions