我正在尝试设置表格样式,但未显示边框。我以前从未发生过这种情况,所以我不确定该怎么做。
这是我的 table :
<table class="table">
<thead>
<tr>
<th>Dessert (100g serving)</th>
<th>Calories</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dessert (100g serving)</td>
<td>Calories</td>
</tr>
</tbody>
</table>
这是我的 less:
@dark-text: rgba(0,0,0,0.87);
@dark-text-secondary: rgba(0,0,0,0.54);
@dark-text-disabled: rgba(0,0,0,0.26);
.table {
z-index: 10;
thead {
tr {
border-bottom: 3px solid @dark-text-disabled;
z-index: 10;
th {
color: @dark-text-secondary;
z-index: 10;
}
}
}
tbody {
tr {
border-bottom: 3px solid @dark-text-disabled;
z-index: 10;
td {
z-index: 10;
}
}
}
}
最佳答案
将 border-bottom
规则移动到 th
和 td
标签或使用 collapsing border model (border-collapse: collapse;
) 用于 .table
.table {
border-collapse: collapse;
}
关于html - 表格边框不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31040422/