我想在 thead
的 tr
底部添加一个边框。
我有如下表格。我能够在 th
的底部放置边框。然而,这不是我想要的,因为两个边界彼此交叉的地方仍然不是黑色,如下图所示。
table {
border-collapse: collapse;
}
table thead tr th {
border-bottom: 1px solid #000000;
}
table th,
table td {
border: 1px solid #d9d9d9;
}
<table>
<thead>
<tr>
<th>
#
</th>
<th>
Date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
TUB1234
</td>
<td>
2018/02/22
</td>
</tr>
</tbody>
</table>
最佳答案
这是一个工作示例:
(请注意,我更正了多个 tr
,我想这是一个错误。)
我为 th
和 td
的边框使用了 rgba 颜色。
table{
border-collapse: collapse;
}
table thead tr th{
border-bottom: 1px solid #000000;
}
table th, table td {
border-left: 1px solid rgba(0,0,0,0.2);
border-right: 1px solid rgba(0,0,0,0.2);
}
table th, table td{ /* Added padding for better layout after collapsing */
padding: 4px 8px;
}
<table>
<thead>
<tr>
<th>
#
</th>
<th>
Date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
TUB1234
</td>
<td>
2018/02/22
</td>
</tr>
</tbody>
</table>
这是另一个片段。
我不知道是否有办法改变它,但它会显示哪些边框在其他边框之上,使用您的示例:
table{
border-collapse: collapse;
}
table th, table td { /* Multicolored border */
border: 1px solid;
border-color: #f00 #0f0 #00f #f0f;
}
table th, table td{ /* Added padding for better layout after collapsing */
padding: 4px 8px;
}
<table>
<thead>
<tr>
<th>
#
</th>
<th>
Date
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
TUB1234
</td>
<td>
2018/02/22
</td>
</tr>
</tbody>
</table>
希望这对您有所帮助。
关于html/css 如何在 thead tr 上添加边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48926784/