J'utilise le framework Bulma CSS et j'essaie en particulier de rendre le tableau réactif.
J'ai essayé de lui donner un width: 100%;
et en appliquant overflow-x: auto;
mais cela ne semble pas fonctionner. Voici la démo: 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>
CSS pertinents:
.pricing__table {
width: 100%;
overflow-x: auto;
}
Vous pouvez envelopper la table dans un conteneur et y appliquer la propriété overflow
à la place.
Vous pouvez également utiliser le is-fullwidth
modificateur sur table
, au lieu de déclarer width
dans le 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>
Mettre à jour selon le commentaire
Dans votre cas, vous devez également ajouter la propriété width
à .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>
J'ai trouvé un excellente alternative qui transforme les éléments horizontaux en éléments verticaux:
@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";}
}
Si vous n'avez pas besoin des en-têtes, supprimez le td:before
modificateurs.