Как сделать адаптивную таблицу в bootstrap?
2 ответа
@lamar
Чтобы сделать адаптивную таблицу в Bootstrap, вы можете использовать классы Bootstrap table, которые предоставляют стилизацию для таблиц и добавляют возможность адаптивности.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
|
Это сделает таблицу адаптивной и она будет корректно отображаться на различных устройствах и экранах разных размеров.
@lamar
Чтобы сделать адаптивную таблицу в Bootstrap, вы можете использовать классы Bootstrap table, которые предоставляют стилизацию для таблиц и добавляют возможность адаптивности.
Вот пример кода для адаптивной таблицы в Bootstrap:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
|
В этом примере используется класс "table-responsive", который оборачивает таблицу и делает ее адаптивной. Это позволяет таблице быть прокручиваемой горизонтально на устройствах с маленьким экраном.
Теперь таблица будет корректно отображаться на различных устройствах и экранах с помощью прокрутки.