Загрузочная таблица опроса и неправильная настройка стиля

Во время работы над проектом, основанным на Bootstrap, я столкнулся с странной проблемой, когда часть стиля была переопределена таблицей стилей пользовательского агента (в Chrome и Firefox). Я нашел эту связанную проблему, которая была решена путем включения тега <!DOCTYPE html>, который я первоначально пропустил. Но теперь я не могу получить классы .table-inverse, .thead-inverse или .thead-default, чтобы затенять мои заголовки таблиц. Насколько я понимаю, у меня есть все необходимые строки, контейнеры и т.д. На месте.

Почему не работает затенение?

.navbar {
  border-radius: 0px
}

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<h2 class="display-1">Bootstrap 4 Inverse Table</h2>

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <table class="table table-inverse">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Ответ 1

Вы также должны добавить bootstrap-X.X-flex.css.

bootstrap-X.X.css
bootstrap-X.X-flex.css
bootstrap.js

Где X.X - номер версии

ИЛИ

Используйте эти CDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>

Ответ 2

Для тех, кому нравится эта тема, но используя Bootstrap 4.0.0-beta.2 или новее, table-inverse и thead-inverse были заменены на -dark для информации о версии версии, связанной здесь

Ответ 3

Убедитесь, что вы используете <th> вместо <td> в заголовок.

Ответ 4

Прост достаточно. В листе CSS, с которым вы ссылаетесь в своей скрипке, не входит стиль .table-inverse.

Ответ 5

Это происходит только для более старых версий бутстрапа. Поскольку класс thead-inverse недоступен. Вы можете просто добавить этот дизайн в свой дизайн css Я надеюсь, что он определенно будет работать так, как я это сделал. Причина этого - thead-inverse доступна только в последних версиях bootstrap.css.

.thead-inverse th {
            color: #fff;
            background-color: #373a3c;
        }