Press "Enter" to skip to content

Responsive Tables JavaScript Plugin | Table-Fluid

Table-Fluid is a very small responsive table solution running in JavaScript that can make your HTML more readable in mobile view.

It detects screen rendering using CSS media queries and converts a wide HTML table into a two-column table on small screens.

How to make use of it:

1. Add the stylesheet table-fluid.css to the pinnacle of the doc.

<link rel="stylesheet" href="dist/css/table-fluid.css" />

2. Add the table-fluid.js script to the tip of the doc.

<script src="dist/js/table-fluid.js"></script>

3. Attach the Table-Fluid function to your HTML table and achieved.

<table class="table-fluid">
  <thead>
  <tr>
    <th>№</th>
    <th>Organization</th>
    <th>ASN</th>
    <th>Name</th>
    <th>Port</th>
  </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>
window.tableFluid('.table-fluid');

Responsive Table With JavaScript And CSS Media Queries, Table Fluid Plugin/Github


See Demo And Download

Official Website(maestro888): Click Here

This superior jQuery/javascript plugin is developed by maestro888. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *