Можно ли разделить столбцы таблицы bootstrap-vue на две группы вертикальной линией?

Я хотел бы разделить таблицу bootstrap-vue вертикальной линией следующим образом:

enter image description here

Из документация кажется, что можно либо иметь границы между всеми столбцами, либо вообще не иметь вертикальных границ, используя реквизиты bordered или borderless для <b-table>.

Является ли это неотъемлемым ограничением bootstrap-vue?

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
0
539
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно будет создать собственный класс для применения к ячейкам столбца.

обычный CSS:

.b-table .my-left-border {
  border-left: 3px solid #000;
}

или при использовании стилей с областью действия

.b-table /deep/ .my-left-border {
  border-left: 3px solid #000;
}

Затем выполните следующие действия в определении полей:

export default {
  // ...
  data() {
    return {
      fields: [
        'age',
        'first_name',
        {
          key: 'last_name',
          class: 'my-left-border'
        }
      ],
      // ...
    }
  },
  // ...
}
<b-table :fields="fields" ... ></b-table>

Другой вариант — использовать селекторы css:

.b-table /deep/ > thead > tr :nth-child(3),
.b-table /deep/ > tbody > tr :nth-child(3),
.b-table /deep/ > tfoot > tr :nth-child(3) {
  border-left: 3px solid #000;
}

Другие вопросы по теме