Как сделать, чтобы вложенная таблица внутри таблицы Bootstrap не наследовала родительский класс "table" Bootstrap? - PullRequest
0 голосов
/ 17 октября 2018

У меня есть две таблицы, одна вложена в другую.В родительской таблице есть class="table table-bordered table-hover", которая приносит все добродетельное сладкое благо Bootstrap, которое мы все знаем и любим.

Но внутри этой родительской таблицы мне нужна вложенная таблица.По умолчанию эта вложенная таблица наследует все те же классы, что и родительский.В этом случае это вызывает проблемы.Мне нужен этот вложенный стол, чтобы НЕ иметь ничего хорошего в Bootstrap.Это должна быть просто обычная не-Bootstrap таблица.

Существует ли быстрый и простой способ сказать, что вложенная таблица НЕ наследует все элементы css родительской таблицы?

(фрагмент ниже не является точным представлением того, с чем я имею дело, но это хороший POC, который мы можем использовать, чтобы найти решение.)

Спасибо!

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

<table class="table table-bordered table-hover">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>
      <table>
        <tr>
          <td>Nested 1a</td>
          <td>Nested 2a</td>
          <td>Nested 3a</td>
         <tr>
        <tr>
          <td>Nested 1b</td>
          <td>Nested 2b</td>
          <td>Nested 3b</td>
         <tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>Row 3</td>
  </tr>
 </table>

1 Ответ

0 голосов
/ 17 октября 2018

В основном, это уже было ответ здесь .Как указано в документации ...

"Все стили таблиц наследуются в Bootstrap 4, что означает, что любые вложенные таблицы будут стилизованы так же, как родительские."

Следовательно, вам нужно было бы добавить переопределивший CSS для «перезагрузки» внутренней таблицы ...

.table-plain tbody tr,
.table-plain tbody tr:hover,
.table-plain tbody td {
  background-color:transparent;
  border:none;
}

https://www.codeply.com/go/o74652EDvj

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...