responsive tables

[Pavel]

Hello,

straightfoward...

how do i make tables responsive?


help would be great

thanks!

 

[mjh]

If by responsive you mean you want the table to be viewable on screens that might not otherwise be able to see the entire width of the table, you can add a horizontal scroll bar by putting the table in a container and using overflow-x: auto;

<div style="overflow-x:auto;">
  <table>
    <!-- your table content -->
  </table>
</div>

If you are already using an external stylesheet and want to keep your styling there, give the container a class name and add overflow-x: auto; with the external CSS.

<div class="table-container">
  <table>
    <!-- your table content -->
  </table>
</div>

.table-container {
  overflow-x: auto; /* Enable horizontal scrolling */
}