Question

我正在用桌子写一个小程序。我发现如果一个tr只包含带有rowspan和colspan属性的td，那么当我添加另一个tr时，这个tr不会在换行符中。这是代码：

<table>
<tr>
    <td colspan='6' rowspan='2'>hello</td>
    <td colspan='6' rowspan='2'>hello</td>
</tr>
<tr>
    <td>hello</td>
</tr>
<tr>
    <td>hello</td>
</tr></table>

供参考，请参阅jsFiddle链接。 http://jsfiddle.net/fvxjq1qL/ 这看起来很尴尬，我不知道如何解决这个问题。非常感谢你的帮助。

http://jsfiddle.net/uhq7o2sw/1/这是我想要的输出（没有第二个空标签）。我正在编写的这个小程序是供用户在html页面上自己绘制表格。（我需要获取html格式表来生成pdf报告，因此用户自己绘制表格会很方便我不必为他们编写html来获取我需要的数据）。当我测试这个小程序时，我发现了这个bug。如果用户只想设置一个带有6个colspans和2行pan的tr（让我们假设他/她希望td更高），则下一个tr将在同一行。所以我试图找到一个解决方案来修复它，但没有运气。

Answer 1

问题是rowspan设置为2。因此，细胞也占据其下方细胞的空间。然后第二行向右开始两个位置（经过rowspan的单元格）。然后该单元格显示在表格的顶部，因为它上面没有单元格。这是因为没有单元格只占据顶行。这个例子可以更清楚地证明：

＆＃13;

table {
    border-spacing: 0;
    border-collapse: collapse;
}
td {
    border: 1px solid black;
}

＆＃13;

<table>
    <tr>
        <td colspan='6' rowspan='2'>hello</td>
        <td></td>
    </tr>
    <tr>
        <td>hello</td>
    </tr>
    <tr>
        <td>hello</td>
    </tr>
</table>

＆＃13;

Answer 2

不幸的是，如果表中仅只有2行，则不能跨越2行。在您的情况下，它必须至少为 3行。否则，它将占用所有两个可用行，并将其他行放在右侧。

因此，如果您假设他/她想生成一个更高的表格单元格并对其进行扩展，您必须禁止它并实现以下条件：跨行的数量必须小于表中所有行的数量。否则，它将产生一个无效的表。

如果某行必须大于另一行，则可以将 height属性设置为此行。

Answer 3

我可以看到您不想使用它，但是在下一行（不存在）中使用空的<tr />将解决此问题。

我将其发布为答案，因为我看不到它在任何地方都突出显示，而是对于此类问题的答案，这就是我需要使用的内容。

<table>
    <tr>
        <td colspan='6' rowspan='2'>hello</td>
        <td colspan='6' rowspan='2'>hello</td>
    </tr>
    <tr></tr> <!-- THIS LINE -->
    <tr>
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
        <td>hello</td>
    </tr>
    <tr></tr>
</table>

tr包含td with rowspan只是没有强制新行与下一个tr

3 个答案: