responsive-table

Responsive table

CSS3 & Vanilla JS

Super flexible & responsive table

🖥️ On desktop as a classic table
📱 On mobile as collapsable rows

A super user-friendly experience, start to use your table also on mobile!

🕹️ Demo

Check the demos to view the effect:

📦 Package

You can download our working demos to use how you prefer:

DOWNLOAD HERE

What inside the zip file:

css/table-mobile.css
css/table-mobile-theme.css
js/table-mobile.js
demo-bootstrap.html
demo-dark.html
demo.html

How to use those files:

table-mobile.css and table-mobile.js are required to work
table-mobile-theme.css is optional, just to apply a great style
the html files are some demos you can use

🛠️ Usage

Add style and javascript link below in your file, inside of head:

<link rel="stylesheet" href="css/table-mobile.css">
 <!-- Optional -->
<link rel="stylesheet" href="css/table-mobile-theme.css">
<script src="js/table-mobile.js"></script>

Add the code below in your file to init script, inside of head or footer:

<script>
  window.onload = () => {
    const selector = "table.table-mobile";
    window.TableMobile.doTable(selector);
  };
</script>

Add classes to your table:

table-mobile for the plain integration, you can use it together with a framework (for example Bootstrap)
table-mobile-theme to apply our beautifull style
table-mobile-dark to apply our style in a dark mode

<table class="table-mobile table-mobile-theme table-mobile-dark">
 <thead>
  <tr>
   <th>...</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>...</td>
  </tr>
 </tbody>
</table>

👾 Connected project

React version:

🍕 Pizza time

If you like this project and you want to support it… PIZZAAHA!

This site is open source. Improve this page.