Responsive Tables Demos

A CSS/JS solution for tables that allows them to shrink on small devices without sacrificing the value of tables, comparison of columns.

Our solution for responsive tables requires two included files (both linked on this page): responsive-tables.css and responsive-tables.js.

The JS will enable us to make some new components on little gadgets, so we don't need to change our table markup on the page. The CSS applies the imperative situating and flood styles to influence the new components to work.

/* Attach the Table CSS and Javascript */
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://portal.domainshostweb.com/stackui.blogspot/Downloads/ResponsiveTable/css/responsive-tables.css">
<script src="stylesheet" href="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="stylesheet" href="https://portal.domainshostweb.com/stackui.blogspot/Downloads/ResponsiveTable/js/responsive-tables.js"></script>

---

Small Word Table

Header 1	Header 2	Header 3	Header 4	Header 5	Header 6
row 1, cell 1	row 1, cell 2	row 1, cell 3	row 1, cell 4	row 1, cell 5	row 1, cell 6
row 2, cell 1	row 2, cell 2	row 2, cell 3	row 2, cell 4	row 2, cell 5	row 2, cell 6
row 3, cell 1	row 3, cell 2	row 3, cell 3	row 3, cell 4	row 3, cell 5	row 3, cell 6
row 4, cell 1	row 4, cell 2	row 4, cell 3	row 4, cell 4	row 4, cell 5	row 4, cell 6

Much of the time, tables like this are alright at littler sizes (since they'll break on each little word). In any case, with this numerous sections a little gadget like a telephone would in any case be an issue.

By attaching a class of .responsive to the table, our JS/CSS will kick in.

     /* Put the responsive class on the table */
     <table class="responsive">
      <tr> … 

Very Long 1st Cell Content

Header 1	Header 2	Header 3	Header 4	Header 5	Header 6
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.	row 1, cell 2	row 1, cell 3	row 1, cell 4	row 1, cell 5	row 1, cell 6
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.	row 2, cell 2	row 2, cell 3	row 2, cell 4	row 2, cell 5	row 2, cell 6
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.	row 3, cell 2	row 3, cell 3	row 3, cell 4	row 3, cell 5	row 3, cell 6
Ham pork leberkas bresaola, brisket t-bone filet mignon hamburger salami andouille short loin sausage.	row 4, cell 2	row 4, cell 3	row 4, cell 4	row 4, cell 5	row 4, cell 6

Finally, in this example you'll see how this works for very long first-cell content. Both the first cell and the remaining cells are independently scrollable on small devices.

We do this so we can correctly predict the height of the cells for both the pinned columns and the rest of the columns.

Tabular Content Table

Recorded	Title	Clip	Length
23rd-Jul-2017	Surah Fatiha		47′ 29″
30-Jul-2017	Session 2		47′ 29″
06-Aug-2017	Session 3		47′ 29″

By attaching a class of .tabular to the table, our JS/CSS will kick in.

/* Put the responsive class on the table */
<table class="tabular">
<thead> 
 <tr>
  <th> 
  </th> 
 </tr>
</thead> 
<tbody> 
<tr>
  <td> 
  </td> 
 </tr>
</tbody> 
</table> 
 

Click here to Download Code Download