Tables

A table is the main element of an admin page: a list of orders, bookings, dishes. Bulma styles an ordinary HTML table with a single table class: cell padding, lines between rows, bold headers. Modifiers add stripes, hover highlighting and borders.

A simple table

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<table class="table">
  <thead>
    <tr><th>Order</th><th>Table</th><th>Total</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>

A neat table with thin lines between rows and a bold header. Its width follows the content; the table markup itself is ordinary HTML from the tutorial.

Modifiers

Modifier	What it does
`is-fullwidth`	The table takes the full width of its parent
`is-striped`	Even rows on a grey background
`is-hoverable`	The row under the mouse is highlighted
`is-bordered`	Borders on every cell
`is-narrow`	Less cell padding

An orders table

Let us build a table for the admin page: full width, with stripes, hover highlighting, status tags and buttons:

<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>Order</th>
        <th>Guest</th>
        <th>Status</th>
        <th class="has-text-right">Total</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1041</td>
        <td>Anna</td>
        <td><span class="tag is-success is-light">Paid</span></td>
        <td class="has-text-right">€36</td>
        <td><button class="button is-small">Open</button></td>
      </tr>
      <tr class="is-selected">
        <td>1042</td>
        <td>Oleg</td>
        <td><span class="tag is-warning">Cooking</span></td>
        <td class="has-text-right">€18</td>
        <td><button class="button is-small">Open</button></td>
      </tr>
      <tr>
        <td>1043</td>
        <td>Maria</td>
        <td><span class="tag is-danger is-light">Cancelled</span></td>
        <td class="has-text-right">€54</td>
        <td><button class="button is-small">Open</button></td>
      </tr>
    </tbody>
    <tfoot>
      <tr><th colspan="3">Total</th><th class="has-text-right">€108</th><th></th></tr>
    </tfoot>
  </table>
</div>

The table spans the full width, rows alternate in colour and light up on hover. The second row is highlighted in the primary colour — this is how a selected order is marked, with the is-selected class on its <tr>. Totals are right-aligned with the has-text-right helper so that the digits line up.

Scrolling on a phone

A wide table does not fit a narrow screen and pushes the page wider. The table-container wrapper fixes this: the table scrolls horizontally inside its own block while the rest of the page stays put. Narrow the window with the example above to check.

Common mistake

Putting is-fullwidth on the table-container instead of the table itself. The wrapper already takes the full width, while the table inside it stays as wide as its content. Table modifiers — is-fullwidth, is-striped and the rest — always go next to the table class.

Thanks for reading!