Menu
I am trying to apply border color (red) for a specific cell and it seems like the color is not applying to top and left side of the cell.
Looks like the border color of other cells are overriding the color that I am trying to apply.
.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>Please let me know your suggestion to fix this issue. Thanks in advance.
636
This is because you have border-collapse: collapse; change it to border-collapse: separate; (coming from Bootstrap .table class) and add border-spacing: 0; if you don't want the gutters between cells.
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>Add display:block; style, and you will be good to go.
.border-red
{
border:red solid 1px !important;
display: block;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
