Во время работы над проектом, основанным на 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>