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

<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/

Answer 2

我不知道我是否理解得很好，但是，也许你只需要将colspan = 3设置为第一行标题。您可以考虑相对于您将拥有的最大细胞数的calspan。在您的示例中，它是10.如果您希望一行中的列跨越更多列，您可以根据该列选择数字。

HTML表格中的嵌套colspan

2 个答案: