Bootstrap html, пытаюсь сделать темную таблицу
Итак, я смотрел на https://getbootstrap.com/docs/4.0/content/tables/ и увидел действительно темную таблицу bg внизу. Я взял код и поместил его в html-документ, это не сработало. Я немного поигрался с кодом, но все равно ничего.
Как мне достать стол?
Помоги пожалуйста!
Код (с сайта):
<!-- On rows -->
<tr class = "bg-primary">...</tr>
<tr class = "bg-success">...</tr>
<tr class = "bg-warning">...</tr>
<tr class = "bg-danger">...</tr>
<tr class = "bg-info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class = "bg-primary">...</td>
<td class = "bg-success">...</td>
<td class = "bg-warning">...</td>
<td class = "bg-danger">...</td>
<td class = "bg-info">...</td>
</tr>
Я могу получить его, чтобы он стал светлой таблицей, но так, как я хочу, то есть на странице темным.
ок @Ofisora сейчас отредактирую
Вы включили ссылку на файл css bootstrap между <head> и </head>?
Ответы 2
если вам нужно создать темный стол, вы можете использовать его следующим образом:
<table class = "table table-sm table-dark">
<thead>
<tr>
<th scope = "col">#</th>
<th scope = "col">First</th>
<th scope = "col">Last</th>
<th scope = "col">Handle</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 colspan = "2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
если по какой-то причине класс начальной загрузки не работает, я советую вам определить свой собственный класс в вашем css:
.table{
background: #212529 !important;
color: white !important;
}
HTML:
<table class = "table">
<caption>List of users</caption>
<thead>
<tr>
<th scope = "col">#</th>
<th scope = "col">First</th>
<th scope = "col">Last</th>
<th scope = "col">Handle</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>
Надеюсь помочь вам. Удачи
класс table.dark не использует черный в качестве цвета фона, а шестнадцатеричное значение # 212529 просто хочет указать, что вы можете захотеть его изменить
Вы импортировали необходимые файлы в свои HTML-документы?
Я только что попробовал код на своей стороне, и он отлично работает.
Ниже приведены мои результаты из предоставленного вами сегмента кода:
Результат, показанный на моем компьютере
Если это то, что вы искали, вы можете обратиться к приведенному ниже коду:
Не забудьте указать в своем собственном теге thead, если собираетесь его использовать. Для получения дополнительной информации обратитесь к https://getbootstrap.com/docs/4.0/content/tables/#table-head-options.
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<body>
<table class = "table table-dark">
<tbody>
<tr class = "bg-primary">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class = "bg-success">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class = "bg-warning">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td class = "bg-primary">1</td>
<td class = "bg-success">2</td>
<td class = "bg-warning">3</td>
<td class = "bg-danger">4</td>
</tr>
</tbody>
</table>
</body>
Можете ли вы опубликовать свой полный код?