Mobile Responsive Tables on COS pages

Developer Support CMS Development
3

@KadyWhite In your stylesheet, be sure that tables are set to 100% width like so:

table {
 width: 100%;
}

However, this may not completely fix the issue depending on how much data is in the table. One of the easiest “one size fits all” solutions to making tables responsive is to just add a wrapper around your table like so:

<div class="responsive-table">
 <table>
 ...
 </table>
</div>

And in your css make horizontal overflow scroll:

.responsive-table {
 width: 100%;
 overflow-y: scroll;
}

Hope this helps!