[英]html table cells with no border
我想創建一個 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>
您可以使用first-child
和last-child
選擇器來完成,請參閱小提琴: https : //jsfiddle.net/snpsp6as/1/
.tb > tr:last-child > td{border-bottom: 1px solid #ccc;}
.tb > tr:last-child > .content-group-spacer{border-bottom: none !important;}
.tb > tr:first-child > td{border-top: 1px solid #ccc;}
.tb > tr:first-child > .content-group-spacer{border-top: none !important;}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.