我试图在一个<td>
单元格中创建两列,同时保持表的其余部分不变。
下面是我正在尝试做的一个示例
下面是我的表格的一个codepen:
https://codepen.io/akamali/pen/XBVxxZ
我试着用colspan
来获取它,并在里面添加了两列<tr>
,但结果总是不均匀。我还试图添加一个表,但看起来一点也不好。有什么想法吗?
发布于 2018-07-31 05:08:57
按如下方式使用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>
https://stackoverflow.com/questions/51602265
复制相似问题