Vim*_*esh 5 html css twitter-bootstrap bootstrap-4
我正在尝试为特定单元格应用边框颜色（红色），但该颜色似乎不适用于单元格的顶部和左侧。
看起来其他单元格的边框颜色覆盖了我尝试应用的颜色。
.border-red
{
border:red solid 1px !important;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div class="col-6">
<table class="table table-sm table-bordered">
<tbody>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Test User 1</td>
<td>10</td>
</tr>
<tr>
<td>Test User 2</td>
<td class="border-red">90</td>
</tr>
<tr>
<td>Test User 3</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>请让我知道您解决此问题的建议。提前致谢。
这是因为您已将border-collapse: collapse;其更改为border-collapse: separate;（来自 Bootstrap.table类）并添加border-spacing: 0;（如果您不希望单元格之间有间距）。
table.table {
border-collapse: separate;
border-spacing: 0;
}
.border-red
{
border:red solid 1px !important;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div class="col-6">
<table class="table table-sm table-bordered">
<tbody>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Test User 1</td><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<div class="col-6">
<table class="table table-sm table-bordered">
<tbody>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Test User 1</td>
<td>10</td>
</tr>
<tr>
<td>Test User 2</td>
<td class="border-red">90</td>
</tr>
<tr>
<td>Test User 3</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<td>10</td>
</tr>
<tr>
<td>Test User 2</td>
<td class="border-red">90</td>
</tr>
<tr>
<td>Test User 3</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>