I was trying the below code in mobile view not able to fix the table-reflow issue in mobile view. Any suggestion will be really appericiated
View code at CODEPEN
<div class="container">
<div class="row">
<div class="col-sm-12">
<table class="table table-reflow">
<thead>
<tr>
<th>Id</th>
<th>Employee Name</th>
<th>Salary</th>
<th>Bonus</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr scope="row">
<td>665</td>
<td>Amit Shah</td>
<td>10000</td>
<td>1000</td>
<td>11000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
This seems to be a known issue in BS4 alpha: https://github.com/twbs/bootstrap/issues/20510
One workaround is to set a fixed width to the table to prevent it from wrapping.
I have the solution for you using media query. Hope it might help you. check the CODEPLY link
CSS:
@media (max-width: 544px) {
.table-reflow thead,
.table-reflow thead tr,
.table-reflow tbody tr {
width: 100%;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.