Responsive HTML Table using Div and Bulma

Making a HTML table with normal table element is very difficult to make the table responsive. So I use the responsive columns of Bulma framework to make divs look like table.

Assume we have the following table:

View on CodePen

<table>
  <tr>
    <td>(1,1)</td>
    <td>(1,2)</td>
    <td>(1,3)</td>
    <td>(1,4)</td>
  </tr>
  <tr>
    <td>(2,1)</td>
    <td>(2,2)</td>
    <td>(2,3)</td>
    <td>(2,4)</td>
  </tr>
</table>

We can make a similar looking and responsive table by the following div elements, and CSS classes of responsive columns provided by Bulma, and each div.column represents a cell in table:

<div class="div-table">
  <div class="columns is-gapless">
    <div class="column">(1,1)</div>
    <div class="column">(1,2)</div>
    <div class="column">(1,3)</div>
    <div class="column">(1,4)</div>
  </div>
  <div class="columns is-gapless">
    <div class="column">(2,1)</div>
    <div class="column">(2,2)</div>
    <div class="column">(2,3)</div>
    <div class="column">(2,4)</div>
  </div>
</div>

View on CodePen

The columns are stacked on top of each other on mobile (width up to 768px).

Bulma add margin-bottom between columns, we can use the following SCSS rule to remove the margin-bottom:

.div-table {
  div.columns.is-gapless {
    margin: 0;
  }
}
Tested on:
  • Chromium Version 56.0.2924.76 Built on Ubuntu , running on Ubuntu 16.10 (64-bit)
  • Bulma 0.4.0
Powered by Github Pages, Pelican, pyScss.