Два уровня строк в таблице HTML с фиксированной шириной <thead>?

Question

У меня есть таблица с фиксированной шириной столбцов:

<table width="100%" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>Title</th>
            <th>Description</th>
            <th>Hours</th>
            <th>Rate</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width:100px"></td>
            ...
    </tbody>
</table>

Это нормально, но теперь я хочу, чтобы описание появилось в строке под заголовком «Заголовок, Часы, Оценить», чтобы оно могло быть длиннее, вероятно, ширины таблицы. Примерно так:

|    Title    |    Hours    |    Rate    |
------------------------------------------
| A title     | Some hours  | A rate     |  <- This is a row
| A long description would go here...    |  <- This is the same row
------------------------------------------
So on...

Я все еще хотел бы обозначить это как одну "строку" в таблице. Это просто предпочтение отображения. Что мне нужно сделать, чтобы достичь этого?

Answer 1

Colspan сделает то, что вы хотите.

<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td colspan="4">long description</td>
</tr>