How can I make a bulma table responsive?

Question

I am using the Bulma CSS framework and specifically I am trying to make the table in it responsive.

I have tried giving it a width: 100%; and applying overflow-x: auto; but it doesn't seem to work. Here is the demo: http://104.236.64.172:8081/#/pricing

Code:

<div class="panel-block">
    <table class="table is-bordered pricing__table">
        <thead>
            <tr>
                <th>Travellers</th>
                <th>Standard</th>
                <th>Delux</th>
                <th>Premium</th>
                <th>Luxury</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Per Person Cost</td>
                <td>₹ 70,523.90</td>
                <td>₹ 70,523.90</td>
                <td>₹ 70,523.90</td>
                <td>₹ 70,523.90</td>
            </tr>
            <tr>
                <td>
                    Extra Person <br>
                    (> 12 yrs)
                </td>
                <td>₹ 70,523.90</td>
                <td>₹ 70,523.90</td>
                <td>₹ 70,523.90</td>
                <td>₹ 70,523.90</td>
            </tr>
            <tr>
                <td>
                    Extra Child <br>
                    (> 12 yrs)
                </td>
                <td>₹ 70,523.90</td>
                <td>₹ 70,523.90</td>
                <td>₹ 70,523.90</td>
                <td>₹ 70,523.90</td>
            </tr>
            <tr>
                <td>Total Cost</td>
                <td>₹ 70,523.90</td>
                <td>₹ 70,523.90</td>
                <td>₹ 70,523.90</td>
                <td>₹ 70,523.90</td>
            </tr>
        </tbody>
    </table>
</div>

Relevant CSS:

.pricing__table {
    width: 100%;
    overflow-x: auto;
}

Answer 1

use .table-container in parent div:

<div class="table-container">
  <table class="table">
    <!-- Your table content -->
  </table>
</div>

https://bulma.io/documentation/elements/table/#table-container

Answer 2

You could wrap the table in a container, and apply the overflow property there instead.

Also, you can use the is-fullwidth modifier on table, instead of declaring width in the CSS.

fiddle

.table__wrapper {
  overflow-x: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet" />
<div class="table__wrapper">
  <table class="table is-bordered pricing__table is-fullwidth">
    <tbody>
      <tr>
        <td>Per Person Cost</td>
        <td>₹ 70,523.90</td>
        <td>₹ 70,523.90</td>
        <td>₹ 70,523.90</td>
        <td>₹ 70,523.90</td>
      </tr>
      <tr>
        <td>
          Extra Person <br> (> 12 yrs)
        </td>
        <td>₹ 70,523.90</td>
        <td>₹ 70,523.90</td>
        <td>₹ 70,523.90</td>
        <td>₹ 70,523.90</td>
      </tr>
      <tr>
        <td>
          Extra Child <br> (> 12 yrs)
        </td>
        <td>₹ 70,523.90</td>
        <td>₹ 70,523.90</td>
        <td>₹ 70,523.90</td>
        <td>₹ 70,523.90</td>
      </tr>
      <tr>
        <td>Total Cost</td>
        <td>₹ 70,523.90</td>
        <td>₹ 70,523.90</td>
        <td>₹ 70,523.90</td>
        <td>₹ 70,523.90</td>
      </tr>
    </tbody>
  </table>
</div>

Update as per comment

In your case, you also need to add the width property to .pricing

updated fiddle

.table__wrapper {
  overflow-x: auto;
}

.pricing {
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/>
<div class="panel">
  <div class="panel-block">
    <div class="pricing">
      <div class="table__wrapper">
        <table class="table is-bordered pricing__table is-fullwidth">
          <tbody>
            <tr>
              <td>Per Person Cost</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
            </tr>
            <tr>
              <td>
                Extra Person
                <br> (> 12 yrs)
              </td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
            </tr>
            <tr>
              <td>
                Extra Child
                <br> (> 12 yrs)
              </td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
            </tr>
            <tr>
              <td>Total Cost</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
              <td>₹ 70,523.90</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>