Thead с одним td (полная ширина) и tbody с 2 столбцами (ширина не зависит от thead)

Хорошо, длинный заголовок. У меня есть таблица, структурированная так:

<table>
<thead>
<tr><th>longer Heading with a width of 100%</th></tr>
</thead>
<tbody>
<tr><td>cell 1</td><td>cell 2</tr>
<tr><td>cell 3</td><td>cell 4</tr>
</tbody>
</table>

И я бы хотел, чтобы th был на всю ширину и не менял ширину ячеек таблицы. Я предполагаю, что есть какое-то CSS-свойство display, которое сделало бы это возможным, но я пока не нашел работающего решения.

Ответ 1

<table>
  <thead>
     <tr><th colspan="2">longer Heading with a width of 100%</th></tr>
  </thead>
  <tbody>
     <tr><td>cell 1</td><td>cell 2 </td></tr>
      <tr><td>cell 3</td><td>cell 4 </td></tr>
 </tbody>

использование colspan сделает трюк для вас

Ответ 2

Это?

<th colspan="2">...</th>

Ответ 3

Это проще: вам просто нужен colspan для вашего элемента th.
Colspan определяет, сколько ячеек выделяет элемент:

<table>
    <thead>
        <tr><th colspan="2">longer Heading with a width of 100%</th></tr>
    </thead>
    <tbody>
        <tr><td>cell 1</td><td>cell 2</tr>
        <tr><td>cell 3</td><td>cell 4</tr>
    </tbody>
</table>

Смотрите мою скрипту