Что влияет на ширину <td>и <th>элементов?

Question

Я пытаюсь исправить заголовок таблицы в верхней части окна, но по какой-то причине установка ширины элементов <td> и <th> следующим образом не приводит к тому, что элементы имеют одинаковые ширина (заголовки столбцов не выровнены с другими ячейками столбцов):

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

Вот пример jsfiddle, который иллюстрирует это: http://jsfiddle.net/zgaPw/1/

После экспериментов с ним я обнаружил, что свойство font-size, похоже, влияет на ширину <td>, но я не уверен, почему или как это исправить.

Может кто-то пролить свет на то, что не так и как это исправить? Спасибо!

Answer 1

На ширину ячеек влияют их братья и сестры (другие ячейки) и родитель (<table>).Чтобы ячейки имели одинаковую ширину, определите для нее свойство ширины, равное:

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

В первой строке, содержащей элементы <th> , у вас естьопределена ширина 600 пикселей, что заставляет голову немного сжиматься.Чтобы исправить это, удалите свойство width в строке или определите width:660px;.

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