Блог

Я пытаюсь закрепить заголовок таблицы в верхней части окна, но по какой-то причине установка ширины элементов <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> , но я не уверен, почему или как это исправить.

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

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

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

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

Скрипка:http://jsfiddle.net/zgaPw/4 /