Responsive Table Code

Get JavaScript, CSS and HTML code for Responsive Tables

You can create following responsive tables with use of JQuery and CSS in your HTML-5 pages.

Type 1 : Two Column Table change to One Column on Small Screen with CSS.

This two column table changes to one column table if screen size is less than 750 px. You may change screen width size and style of table as per your wish.

This table is used where column 2 content is not related to Column 1 content. This type of table are being used on various pages of this site including Home Page.

Demo

Type 2 : Change Two Column Table to One Column on Small Screen. Only CSS. No JavaScript required.

This two column table changes to one column table on screen size less than 750 px. You may change screen width size and style of table as per your wish.

This table is used where column 2 content describes / related to content of Column 1 content. On small screen the bottom border of column 1 and top border of column 2 of 'td' and'th' elements are hidden. The text of 'td' elements of column 1 become bold. You may see the working example of this type of table on this page.

Demo

Type 3 : Hide any number of column The width of hidden column(s) gets distributed in visible columns. JavaScript with JQuery and CSS required.

1. This is actually a set of two tables. The main table (class tabB) is always visible. However, another table ( class=tabA ) containing buttons to Show / Hide columns is visible only if screen width is less than 750 px.
2. The table supports merging of columns ' colspan=2' and ' colspan=3' and also merging of rows 'rowspan=2' features in 'th' element.
3. Please note that classes 'tabA', 'tabB', 'cs1', 'cs2', 'csp3, and 'csp4' are for JavaScript code only.
4. Show / Hide buttons for showing of hiding columns appear automatically if screen width is less than 750 px and disappear if it is 750 px or more. You may check it by altering the width of your of browser window.