我想创建一个如下所示的 html 表格。 我尝试了 frame="hsides"rules="groups"等所有内容。 似乎没有任何效果。请问有什么想法吗?
更新:这是代码。我需要更少的列之间的空间,并且 tbody 上没有线。
<table class="grouped-columns-table" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>Col A1</th>
<th class=""></th><!-- SPACER -->
<th>Col A2</th>
<th class=""></th><!-- SPACER -->
<th>Col B1</th>
</tr>
</thead>
<tbody class="tb">
<tr>
<td>A1</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>A2</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>B1</td>
</tr>
<tr>
<td>A1</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>A2</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>B1</td>
</tr>
<tr>
<td>A1</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>A2</td>
<td class="content-group-spacer"></td><!-- SPACER -->
<td>B1</td>
</tr>
</tbody>
</table>
.grouped-columns-table {
border-collapse: collapse;
}
.content-group {
border: 0;
}
.content-group-spacer {
width: 1px;
}
.grouped-columns-table td:not(.content-group-spacer) {
border: 0px solid #ccc;
border-collapse: collapse;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-top: 0px solid #ccc;
border-bottom: 0px solid #ccc;
}
tbody {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
最佳答案
你把这个复杂化了很多。摆脱表示性 HTML(包括其中没有数据的数据单元格)。
您只需要设置 border-spacing
,这样您的单元格之间就有您想要的空间,然后在您想要边框的单元格边缘周围设置边框。
.grouped-columns-table {
border-collapse: seperate;
border-spacing: 10px 0;
}
.grouped-columns-table tbody tr > * {
border-left: solid black 1px;
border-right: solid black 1px;
}
.grouped-columns-table tbody tr:first-child td {
border-top: solid black 1px;
}
.grouped-columns-table tbody tr:last-child td {
border-bottom: solid black 1px;
}
<table class="grouped-columns-table">
<thead>
<tr>
<th>Col A1</th>
<th>Col A2</th>
<th>Col B1</th>
</tr>
</thead>
<tbody class="tb">
<tr>
<td>A1</td>
<td>A2</td>
<td>B1</td>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>B1</td>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>B1</td>
</tr>
</tbody>
</table>
关于javascript - 没有边框的html表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37033235/