Как согласовать TH Header с TD в TBody

У меня возникают проблемы с попыткой встраивания таблицы в существующую HTML-страницу с некоторым CSS.

Этот CSS скрывает заголовок таблицы по умолчанию с определением стиля, например:

.tablestuff thead {
     display: none;
}

Но я хочу показать таблицу, поэтому я попытался установить стиль в элементе thead с помощью "display: block" (с javascript). Это делает отображение заголовка, но столбцы заголовка не совпадают с столбцами td.

Я сократил свой HTML до следующего (надеюсь, с минимальными опечатками) и показывая стиль элемента thead, заданный javascript.

<div class="tablestuff">
<table border="1">
<thead style="display:block">
<tr>
<th id="th1" style="width: 20px"></th>
<th id="th2" style="width: 20px"></th>
</tr>
</thead>
<tbody>
<tr>
<td headers="th1" style="width: 20px"></td>
<td headers="th2" style="width: 20px"></td>
</tr>
</tbody>
</table>
</div>

Как я могу сделать и представление заголовка, а также правильно выровнять столбцы td?

Ответ 1

CSS содержит больше режимов отображения, чем обычно используемые none, inline, inline-block и block. На самом деле существует довольно много.

В этом случае появляется то, что вы хотите использовать вместо display:block; is display:table-header-group;.

Вот несколько примеров различных стилей, применимых к вашей таблице:

http://jsfiddle.net/CrYdz/1

Ответ 2

Проблема вызвана display:block в атрибуте style для thead.

Измените его на display:table-header-group

Ответ 3

Чтобы установить ту же ширину для заголовка таблицы и тела таблицы в таблице:

<table style="table-layout:fixed">

Ответ 4

Если вы хотите показать элемент thead, используйте это значение: display: table-header-group;

Ответ 5

Возможно, содержание THs шире, чем содержание TDs, и в действительности ширина не 20px, как установлено.

Итак, поскольку вы сначала загружаете страницу без thead, таблица получает ширину TD. Затем, когда вы показываете THEAD by js, ширина таблицы остается неизменной, но, вероятно, TH имеют разную ширину.

Ответ 6

показать и скрыть th вместо thead с помощью css

/* to hide */
.tablestuff thead th{
     display: none;
}

/* to show */
.tablestuff thead th{
     display: table-cell;
}