<分区>
我正在尝试在一列中创建两列 <td>
单元格,同时保持表格的其余部分完好无损。
这是我的表格的代码笔:
https://codepen.io/akamali/pen/XBVxxZ
我试着用 colspan
得到它并添加两列 <tr>
但结果总是参差不齐。我也尝试添加一张 table ,但看起来一点也不好。有任何想法吗?
标签 html css html-table
<分区>
我正在尝试在一列中创建两列 <td>
单元格,同时保持表格的其余部分完好无损。
这是我的表格的代码笔:
https://codepen.io/akamali/pen/XBVxxZ
我试着用 colspan
得到它并添加两列 <tr>
但结果总是参差不齐。我也尝试添加一张 table ,但看起来一点也不好。有任何想法吗?
最佳答案
使用colspan
如下:
.table {
width: 100%;
background-color: #ffffff;
border: 4px solid #979797;
}
.table td {
border-right: 2px solid #979797;
border-bottom: 4px solid #979797;
padding: 50px;
height: 10px;
}
.table td:nth-child(3n+0) {
border-right: 4px solid #979797;
}
.table td:last-child {
border-right: none;
}
.table tr:last-child td {
border-bottom: none;
}
<div>
<table class="table">
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="3"></td>
<td colspan="3"></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
关于html - 如何在一个 <td> 单元格中制作两列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51602265/