El framework CSS de Bulma provee clases para agregar estilos a las tablas, así como contenedores de las mismas.

Hoy vamos a ver cómo hacer una tabla responsiva utilizando la clase table-responsive, clase que funciona pero para que lo haga debemos hacer algunos cambios con los div padres.

¿Qué es una tabla responsiva?

En este caso específico, una tabla responsiva es aquella que, al ser más ancha que la pantalla, muestra un scroll.

Hay una variación en donde las columnas se convierten en filas, pero no veremos eso; por ahora veremos cómo hacerla scrollable.

Tabla responsiva en Bulma

Vamos al grano. Hay que encerrar la tabla dentro de un div con la clase table-container, pero es muy importante que este div no esté dentro de otro div que tenga la clase column ni la clase columns.

Es decir, lo siguiente no hará la tabla responsiva:

<div class="columns">
      <div class="column">
        <div class="table-container">
          <table class="table">
            <thead>
            <tr>
              <th>Nombre</th>
              <th>Edad</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Luis Cabrera Benito</td>
              <td>22</td>
            </tr>
            <tr>
              <td>John Doe</td>
              <td>50</td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

Pero lo siguiente sí:

<div class="table-container">
  <table class="table">
    <thead>
    <tr>
      <th>Nombre</th>
      <th>Edad</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Luis Cabrera Benito</td>
      <td>22</td>
    </tr>
    <tr>
      <td>John Doe</td>
      <td>50</td>
    </tr>
    </tbody>
  </table>
</div>

En mi caso causó una confusión debido a que utilizo ambas clases para la cuadrícula y todo eso, pero no es necesario encerrarla, pues ocupará el 100 % del ancho de la pantalla.

Para finalizar el post quiero mostrar la tabla responsiva de un sistema textil en el que ando trabajando: