How can I make a bulma table responsive?
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>I found a great alternative that turns horizontal elements into vertical ones:
@media
only screen and (max-width: 1500px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 200px;
margin-left: 150px;
}
td:before {
position: absolute;
top: 12px;
left: 6px;
width: 200px;
padding-right: 40px;
white-space: nowrap;
margin-left: -150px;
}
td:nth-of-type(1):before { content: "Option"; }
td:nth-of-type(2):before { content: "Description"; }
td:nth-of-type(3):before { content: "Type"; }
td:nth-of-type(4):before { content: "Default";}
}
If you don't need the headers, remove the td:before modifiers.
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