html - 用垂直行分隔 HTML 表格中的单元格

Question

我有一个行/列倒转的表格，如 HTML Table with vertical rows .我想将一些表格单元格一分为二。

HTML

<table border="1" class="test1">
<tbody>
<tr>
    <td>row 1, cell 1</td>
    <td>row 1 cell 2</td>
    <td> row 1 cell 3 </td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td><table><tr><td>row 2,</td><td> cell 2</td></tr></table></td>
    <td><table><tr><td>row 2,</td><td> cell 3</td></tr></table> </td>
</tr>
</tbody>
</table>

CSS

table.test1 >tbody > tr { display: block; float: left; }
table.test1 >tbody > tr > td { display: block; }

请注意，我需要放置 tbody 标签，因为某些浏览器会自动添加它，这可能会弄乱我对直接子项的 css 指令。 这适用于 2x2 表格，但单元格的对齐方式对于 2x3 表格已经搞砸了(我需要为更大的表格执行此操作)。有没有办法只用 CSS 来做到这一点？ (我宁愿避免使用 java 脚本)。提前谢谢你。

Answer 1

除此之外，在大多数情况下，div 容器会更有意义，您可以为表格使用 colspan。这是在 HTML 4.01 中引入的，正是为这种情况而设计的。

<table border="1" class="test1">
<tbody>
<tr>
    <td>row 1, cell 1</td>
    <td colspan="2">row 1 cell 2</td>
    <td colspan="2"> row 1 cell 3 </td>
</tr>
<tr>
    <td>row 2, cell 1</td>
    <td>row 2,</td>
    <td> cell 2</td>
    <td>row 2,</td>
    <td> cell 3</td>
</tr>
</tbody>
</table>