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>

在HTML表格中用垂直行划分单元格

1 个答案: