Блог

Главная - Вопросы по программированию - Удалить левую границу 2-го столбца в таблице bootstrap 4

Удалить левую границу 2-го столбца в таблице bootstrap 4

#html #bootstrap-4

#HTML #bootstrap-4

Вопрос:

У меня есть таблица Bootstrap 4, как показано ниже:

 <table class="my-table table-bordered striped table">

  ......
</table>

У меня есть макет из двух столбцов, я хотел бы удалить левую боковую границу 2-го столбца, есть какие-либо предположения по этому поводу?

Это также будет включать th (заголовок).

Спасибо

Ответ №1:

Используя css для выбора 2-го дочернего элемента tr, затем удалите его слева

 body{
  padding: 20px;
}

.my-table tr > *:nth-of-type(2) {
  border-left-style: hidden;
} 
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<table class="my-table table-bordered striped table">
<tr>
   <th>header 1</th>
   <th>header 2</th>
   <th>header 3</th>
</tr>
<tr>
   <td>data 1-1</td>
   <td>data 2-1</td>
   <td>data 3-1</td>
</tr>
<tr>
   <td>data 1-2</td>
   <td>data 2-2</td>
   <td>data 3-2</td>
</tr>
</table>

Комментарии:

1. это не работает для меня, можете ли вы поделиться codepen, если не возражаете

2. то есть для всей левой боковой границы, а не только для одной

3. для меня это так, но заголовок приобретает красный цвет, а не вся левая сторона столбца, и он по-прежнему отображает границу

4. Вы хотите удалить левую боковую границу 2-го столбца (включить th), этот css-код делает именно это. Чего вы хотите больше, чем это?

5. можете ли вы заставить его работать с этим фрагментом: codepen.io/mlms13/pen/CGgLF