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;
}
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.
.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
.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>