我尝试拆分中间行并保持上行和底部不变。
<table border="1" width="500">
<tbody>
<tr bgcolor="red">
<td width="10%"> </td>
<td width="80%"> </td>
<td width="10%"> </td>
</tr>
<tr bgcolor="green">
<td width="50%" colspan="2"> </td>
<td width="50%"> </td>
</tr>
<tr bgcolor="blue">
<td colspan="3"> </td>
</tr>
</tbody>
</table>
如何使用一个表格标签将中间行分成两列?
最佳答案
添加更多colspan:
table {
width: 500px;
table-layout: fixed;
border: 1px outset;
}
tr:nth-child(1) > td:nth-child(2) {
width: 80%;
}
td::after {
content: '\200B'; /* Insert zero-width space */
}
table { border: 1px outset; }
td { border: 1px inset; }
tr:nth-child(1) { background: red; }
tr:nth-child(2) { background: green; }
tr:nth-child(3) { background: blue; }
<table>
<tbody>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="4"></td>
</tr>
</tbody>
</table>
关于html - 表格行的不同宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40830825/