用垂直行划分 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>