Question

I’m trying to fix a table header to the top of a window, but for some reason setting the widths of the <td> and <th> elements in the following way doesn’t result in the elements having the same width (the column headers are not aligned with the other column cells):

th, td {
    padding-left: 20px;
}

td:first-child, th:first-child {
    width: 80px;
}

td:nth-child(2), th:nth-child(2) {
    width: 200px;
}

td:last-child, th:last-child {
    width: 320px;
    padding-right: 20px;
}

Here’s a jsfiddle example that illustrates this: http://jsfiddle.net/zgaPw/1/

After experimenting with it, I found that the font-size property seems to affect the width of the <td>, but I’m not sure why or how to correct it.

Can someone shed some light as to what is wrong and how to correct it? Thanks!

Answer 1

The width of cells are affected by their siblings (other cells), and the parent (<table>). To get the cells have the same width, define a width property on the cell which is equal to:

For each cell:
    width + padding left + padding right
= 660px;

At your first row, containing the <th> elements, you have defined a width of 600px, which causes the head to shrink a little. To fix this, remove the width property on the row, or define width:660px;.

Fiddle: http://jsfiddle.net/zgaPw/4/