Html 如何在表中的行中显示行?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1059291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I display rows within rows in table?
提问by A Salcedo
I am trying to give the effect of general headings in this table and then subdivide such heading into three categories. The table should continue this subdivisions all the way to the end. I see that I can probably insert a table within a row insert, but don't want to saturate myself with tables. Is there a way to get this effect in a simpler way?
我试图给出该表中一般标题的效果,然后将此类标题细分为三类。表格应该一直延续到最后。我看到我可能可以在行插入中插入一个表格,但不想让表格让自己饱和。有没有办法以更简单的方式获得这种效果?
回答by NotMe
You can use the Colspan and rowspan attributes to set how far each cell goes across rows and columns.
您可以使用 Colspan 和 rowspan 属性来设置每个单元格跨行和跨列的距离。
For example:
例如:
<table>
<tbody>
<tr>
<td rowspan="2">Top Left Header</td>
<td colspan="3">Call Standard</td>
</tr>
<tr>
<td>Flagged</td>
<td>Percent</td>
<td>Days</td>
</tr>
</tbody>
</table>
Note that the table ends up with 4 columns. The first row defines one column which crosses 2 rows, and a column which crosses 3 columns.
请注意,该表以 4 列结尾。第一行定义了一个跨越 2 行的列和一个跨越 3 列的列。
The second row just fills in the "missing" columns; ignoring the first one because it was defined previously.
第二行只是填充“缺失”的列;忽略第一个,因为它是之前定义的。
回答by Siddhartha Reddy
You can use rowspan and colspan to achieve this:
您可以使用 rowspan 和 colspan 来实现这一点:
<table>
<tr>
<td rowspan="2">Column 1 Heading</td>
<td colspan="3">Call Standard</td>
<td rowspan="2">Column 3 Heading</td>
</tr>
<tr>
<td>Flagged</td>
<td>Percent</td>
<td>Days</td>
</tr>
<tr>
<td>Column 1 Value</td>
<td>4</td>
<td>1%</td>
<td>6</td>
<td>Column 3 Value</td>
</tr>
</table>
回答by Sampson
Colspan, Rowspan, or Table-Nesting*.
Colspan、Rowspan或Table-Nesting*。
*table-nesting is detestable, but sometimes it's easier to work with than complicated series' of colspans and rowspans.
*table-nesting 是可憎的,但有时它比复杂系列的 colspans 和 rowspans 更容易使用。
回答by Grzegorz Oledzki
How about using the "colspan" as defined by the HTML standard? You would apply it to the cell called "call standard" and define it should span over 3 cells.
如何使用HTML 标准定义的“colspan” ?您可以将其应用于名为“调用标准”的单元格,并定义它应跨越 3 个单元格。
回答by Yuval
You don't have to have another inner table... you can have the short row as a full table row, and have header cells that don't subdivide rowspan
to span it (and accordingly use colspan
on above and below cells).
您不必有另一个内部表格......您可以将短行作为完整表格行,并且具有不细分rowspan
以跨越它的标题单元格(并相应地用于colspan
上方和下方的单元格)。