Вложенный colspan в таблице HTML

Question

Я пытаюсь создать простую таблицу, но как только я устанавливаю colspans в последовательных строках таблицы, атрибуты colspan второй строки переопределяются:

<table class="d-week">
<caption>
<h4>table</h4>
</caption>
<thead>
    <tr>
        <th class="col_first"></th>
        <th colspan="1">1st week</th>
        <th colspan="1">2nd week</th>
        <th colspan="1">3rd week</th>
    </tr>
    <tr>
        <th></th>
        <th colspan="3">prop1</th>
        <th colspan="3">prop2</th>
        <th colspan="3">prop3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td></td>
        <td>col1</td>
        <td>col1</td>
        <td>col1</td>
        <td>col2</td>
        <td>col2</td>
        <td>col2</td>
        <td>col3</td>
        <td>col3</td>
        <td>col3</td>
    </tr>
</tbody>
</table>

Но здесь ячейки тела таблицы выравниваются по первому ряду заголовков, а не по второму (даже если я удаляю свойство colspan из строки первого заголовка). Может ли кто-нибудь мне помочь?

РЕДАКТИРОВАТЬ: что, если в строке второго заголовка более 3 th? http://jsbin.com/icetom/3

Answer 1

Не знаю, правильно ли я понимаю, но, может быть, вам просто нужно установить colspan = 3 для первого ряда заголовков.Вы можете думать о размахе калорий относительно максимального количества клеток, которое у вас будет.В вашем примере это 10. Если вы хотите, чтобы столбец в строке охватывал больше столбцов, вы выбираете число на основе этого.

Answer 2

<table>
<caption>
<h4>table</h4>
</caption>
<thead>
    <tr>
        <th></th>
        <th colspan="3">1st week</th>
        <th colspan="3">2nd week</th>
        <th colspan="3">3rd week</th>
    </tr>
    <tr>
        <th></th>
        <th colspan="3">prop1</th>
        <th colspan="3">prop2</th>
        <th colspan="3">prop3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td></td>
        <td>col1</td>
        <td>col1</td>
        <td>col1</td>
        <td>col2</td>
        <td>col2</td>
        <td>col2</td>
        <td>col3</td>
        <td>col3</td>
        <td>col3</td>
    </tr>
</tbody>
</table>

Живой пример здесь: http://jsbin.com/ateraw/