Bootstrap 4 - цвет границы для определенной ячейки в таблице - PullRequest
Новая
       4

Bootstrap 4 - цвет границы для определенной ячейки в таблице

0 голосов
/ 10 мая 2018

Я пытаюсь применить цвет границы (красный) для конкретной ячейки, и кажется, что цвет не применяется к верхней и левой части ячейки.

Похоже, цвет рамки других ячеек переопределяет цвет, который я пытаюсь применить. 

.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>

Пожалуйста, дайте мне знать ваше предложение, чтобы решить эту проблему.Заранее спасибо.

Ответы [ 3 ]

0 голосов
/ 10 мая 2018

Добавить отображение: блок; стиль, и вам будет хорошо идти. 

.border-red
    {
     border:red solid 1px !important;
        display: block;
    }
0 голосов
/ 10 мая 2018

Удалить класс border-collapse: collapse; и заменить его на border-collapse: separate;

0 голосов
/ 10 мая 2018

Это потому, что у вас есть 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...