Preserve column width with bootstrap3 responsive table
I have a table with 7 columns (td). I set it to a fixed width and it works fine with the desktop browser. However, when I resize my browser to simulate a mobile phone, or even access this page using a mobile device, it will not respect the column width.
I won't put all the html, but basically:
<div class="table-responsive">
<table>
<tr>
<td class="w-large">Column 1</td>
<td class="w-medium">Column 2</td>
<td class="w-medium">Column 3</td>
<td class="w-medium">Column 4</td>
<td class="w-medium">Column 5</td>
<td class="w-medium">Column 6</td>
<td class="w-medium">Column 7</td>
</tr>
</table>
</div>
CSS
.w-large {
width: 198px;
}
.w-medium {
width: 176px;
}
Is there a way to keep the column width on mobile? Does bootstrap have a custom class to make it look like a tip?
+3
source to share
1 answer
.table-responsive should be like yours on a wrapper around the table. The widths will not be preserved because the class puts white-space: nowrap;
on th, td, etc. Do this instead:
@media screen and (max-width: 767px) {
.alt-table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
overflow-x: auto;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #dddddd;
-webkit-overflow-scrolling: touch;
}
}
Html
<div class="alt-table-responsive">
+9
source to share