2

这是我需要做的。

我正在创建一个网格，其中包含应该在表格中表示的小部件。每个小部件都有一个可变宽度，表示包含它的 td 的 colspan，高度为 1 或 2，应该表示该单元格的行跨度。

一切正常，直到我遇到这样一种情况，即一行的所有单元格的 colspan 为 2，而下一行可以有任何类型的单元格。下一行显示在上一行而不是下一行的旁边。

这是一个复制问题的jsfiddle，代码如下：

<table>
<tr>
    <td rowspan = "2">ONE</td>
</tr>
<tr>
    <td rowspan = "1">1</td>
    <td rowspan = "1">2</td>
    <td rowspan = "1">3</td>
    <td rowspan = "1">4</td>
</tr>
</table>

这是一个错误吗？难道我做错了什么？

编辑：要清楚，我想做的是有一排小部件的高度是常规行的两倍

4

3 回答 3

0

很难准确地可视化您想要什么，但也许您应该使用块元素而不是表格。表格只能用于表格数据。rowspan如果没有要跨越的行，该属性将无法正常工作。

<table>
  <tr>
   <td rowspan="2">ONE</td>
   <td>TWO</td>
 </tr>
  <tr>
   <td>1</td>
   <td>2</td>
   <td>3</td>
   <td>4</td>
 </tr>
</table>

看小提琴

于 2013-03-04T15:41:29.293 回答
0

而不是强制一个东西到两行，通常只有当你在那组行中有更多单元格时才会这样做，只需设置单元格的高度：

http://jsfiddle.net/vjPMw/5/

td {
    height: 20px;
    background-color: #eee;
}
td.doubleheight {
    height: 40px;
}

<table>
    <tr>
        <td class="doubleheight">ONE</td>
    </tr>
    <tr>
        <td rowspan = "1">1</td>
        <td rowspan = "1">2</td>
        <td rowspan = "1">3</td>
        <td rowspan = "1">4</td>
    </tr>
</table>

真的，我甚至认为这是不必要的，因为单元格通常会扩展以包含其内容。也许您的情况的更完整的演示是为了。另外，我同意 Aarolama Bluenk 的观点，也许一张桌子一开始就不是正确的方法。

于 2013-03-04T15:43:02.633 回答
0

第一行有 1 个行跨度 = 2 的单元格，因此 html 期望下一行是“跨越”的行，但是您添加了 4 个 td 的行。我建议<tr></tr>在第一个之后添加空并使用它或将第一个 td 修复为：<td rowspan="2" colspan="4">ONE</td>

于 2017-07-09T22:54:08.980 回答