Таблицы

Таблица — главный элемент админ-панели: список заказов, бронирований, блюд. Bulma оформляет обычную HTML-таблицу одним классом table: отступы в ячейках, линии между строками, жирные заголовки. Модификаторы добавляют полосы, подсветку при наведении и рамки.

Простая таблица

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<table class="table">
  <thead>
    <tr><th>Заказ</th><th>Стол</th><th>Сумма</th></tr>
  </thead>
  <tbody>
    <tr><td>1041</td><td>5</td><td>€36</td></tr>
    <tr><td>1042</td><td>2</td><td>€18</td></tr>
    <tr><td>1043</td><td>8</td><td>€54</td></tr>
  </tbody>
</table>

Аккуратная таблица с тонкими линиями между строками и жирной шапкой. Ширина — по содержимому; разметка самой таблицы — обычный HTML из учебника.

Модификаторы

Модификатор	Что делает
`is-fullwidth`	Таблица на всю ширину родителя
`is-striped`	Чётные строки на сером фоне
`is-hoverable`	Строка под мышью подсвечивается
`is-bordered`	Рамки у всех ячеек
`is-narrow`	Меньше отступы в ячейках

Таблица заказов

Соберём таблицу для админ-панели: на всю ширину, с полосами, подсветкой, метками статуса и кнопками:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<div class="table-container">
  <table class="table is-fullwidth is-striped is-hoverable">
    <thead>
      <tr>
        <th>Заказ</th>
        <th>Гость</th>
        <th>Статус</th>
        <th class="has-text-right">Сумма</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1041</td>
        <td>Анна</td>
        <td><span class="tag is-success is-light">Оплачен</span></td>
        <td class="has-text-right">€36</td>
        <td><button class="button is-small">Открыть</button></td>
      </tr>
      <tr class="is-selected">
        <td>1042</td>
        <td>Олег</td>
        <td><span class="tag is-warning">Готовится</span></td>
        <td class="has-text-right">€18</td>
        <td><button class="button is-small">Открыть</button></td>
      </tr>
      <tr>
        <td>1043</td>
        <td>Мария</td>
        <td><span class="tag is-danger is-light">Отменён</span></td>
        <td class="has-text-right">€54</td>
        <td><button class="button is-small">Открыть</button></td>
      </tr>
    </tbody>
    <tfoot>
      <tr><th colspan="3">Итого</th><th class="has-text-right">€108</th><th></th></tr>
    </tfoot>
  </table>
</div>

Таблица растянута на всю ширину, строки чередуются по цвету и подсвечиваются при наведении. Вторая строка выделена цветом primary — так отмечают выбранный заказ классом is-selected у <tr>. Суммы выровнены вправо хелпером has-text-right, чтобы разряды стояли друг под другом.

Прокрутка на телефоне

Широкая таблица не помещается на узком экране и раздвигает страницу. Обёртка table-container решает это: таблица прокручивается по горизонтали внутри своего блока, а остальная страница остаётся на месте. Сузьте окно с примером выше, чтобы проверить.

Частая ошибка

Ставить is-fullwidth на table-container, а не на саму таблицу. Обёртка и так занимает всю ширину, а таблица внутри неё остаётся по содержимому. Модификаторы таблицы — is-fullwidth, is-striped и остальные — всегда пишутся рядом с классом table.

Спасибо, что читаете!