Allowing users to customize table column widths in percentages that total up to 100 provides flexibility.
However, this results in cramped tables on mobile devices.
To address this issue, I aim for the table to become horizontally scrollable with the bootstrap 'table-responsive' class when viewed on mobile.
I attempted adding a class to the table columns within a mobile media query to adjust the widths, but unfortunately, this only exacerbated the cramped layout.
//css
@media (max-width: 769px) {
.wiki-table-c-width {
width: auto !important;
}
}
//example table html
<div class ="table-responsive">
<table class ="table table-bordered table-striped">
<tr> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> <td class ="wiki-table-c-width" style ="width: 10%"></td> </tr>
</table>
</div>
To summarize, custom set widths are ideal for desktop viewing, while automatic width and horizontal scrolling provide a better user experience on mobile devices.