Как сделать адаптивную таблицу в bootstrap?

Пользователь

от lamar , в категории: HTML/CSS , 2 года назад

Как сделать адаптивную таблицу в bootstrap?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от krista , 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>


Это сделает таблицу адаптивной и она будет корректно отображаться на различных устройствах и экранах разных размеров.

Пользователь

от jaylen.trantow , год назад

@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", который оборачивает таблицу и делает ее адаптивной. Это позволяет таблице быть прокручиваемой горизонтально на устройствах с маленьким экраном.


Теперь таблица будет корректно отображаться на различных устройствах и экранах с помощью прокрутки.