Question

我需要您的帮助，在以下code中添加第二个表格行：

   <body>

<h1>TEST</h1>

<table class="table">

    <thead>
        <tr>
            <th rowspan="2">#</th>
            <th rowspan="3">Title 1</th>
            <th colspan="3">Title 2</th>
        </tr>
        <!-- I tried adding another table row but the output was not what I expected. The Roman numbers should         appear under "Title 2".
        <tr>
            <th>I</th>
            <th>II</th>
            <th>III</th>
        </tr>
        -->
        <tr>
            <th>I <br>- Lorem ipsum dolor.<br> - Lorem ipsum dolor<br> - Lorem ipsum dolor </th>
            <th>II <br> Lorem ipsum dolor</th>
            <th>III <br> Lorem ipsum dolor</th>
        </tr>

    </thead>
    <tbody>
        <tr>
            <td rowspan="2">1</td>        
            <td>Lorem ipsum dolor<sup>*1</sup><br> a)lorem ipsum dolor</td>
            <td>Lorem ipsum dolor</td>
            <td>Lorem ipsum dolor</td>
            <td>Lorem ipsum dolor</td>
        </tr>
        <tr>
            <td>b) Lorem ipsum dolor</td>
            <td>Lorem ipsum dolor</td>
            <td>Lorem ipsum dolor</td>
            <td>Lorem ipsum dolor</td>
        </tr>       
    </tbody>

</table>    


</body>

当我添加第二个表格行时，内容会向左移动一个空格。

我做错了什么？起初我认为这是一个rowpan问题，但我将“Title 1”的值修改为3以便容纳新行并且问题仍然存在。

任何建议都将受到高度赞赏！

感谢您的时间和帮助。

Answer 1

导致问题的原因

问题是由rowspan和<th rowspan="2">#</th>上的<th rowspan="3">Title 1</th>引起的。

将属性rowspan="n"作为表格单元格的属性基本上意味着您的表格单元格跨越多行，n等于您希望它跨越的行数（aka { {1}}跨越。

如何解决您的问题

要解决您的问题，您需要确保span和rowspan的{{1}}值等于其左侧的行数。

由于您希望在那里有3行且<th rowspan="2">#</th>的{{1}}已经为3，这意味着您只需要将<th rowspan="3">Title 1</th>更改为<th rowspan="3">Title 1</th>。

结果

在应用修复程序后，您的代码应该是什么样子：

＆＃13;

rowspan

＆＃13;

<th rowspan="2">#</th>

＆＃13;

小提琴

另见this Fiddle。

HTML表格 - 添加第二个表格行

1 个答案:

导致问题的原因

如何解决您的问题

结果

小提琴