我看到很多关于列宽的问题,但我无法找到与我完全一样的场景的答案。
这是我的桌子:
<table>
<tr>
<td colspan="3">Title goes here</td>
<td>A</td>
<td class="right">B</td>
</tr>
<tr>
<td rowspan="3">C</td>
<td>D</td>
<td>E</td>
<td>F</td>
<td class="right">G</td>
</tr>
<tr>
<td>H</td>
<td colspan="2" class="center">I</td>
<td rowspan="2" class="right">J</td>
</tr>
<tr>
<td>K</td>
<td>L</td>
<td>M</td>
</tr>
<tr>
<td class="right">N</td>
<td colspan="4" class="center">O</td>
</tr>
</table>
这是我的CSS:
<style>
table
{
table-layout: fixed;
}
table, td
{
border: 1px solid;
}
.right
{
text-align:right;
vertical-align:bottom;
}
.center
{
text-align: center;
}
</style>
我想要实现的是所有五列在最宽的基础上具有相同的宽度。我的想法是我不知道标题会有多大。我知道我可以为表格设置一个固定宽度(例如 200 像素或 100%),但我不想这样做。我希望列的宽度和表格的宽度随着标题的扩展而扩展。如您所见,标题跨越三列。