कर वित्त
Search This Site
  1. Home
  2. Banking
  3. Tax
  4. Forms
  5. PPF - SSY
  6. Sr. Citizen
  7. Widgets
  8. Misc.
  1. Home ➤ 
  2. Misc. ➤ 
  3. You Are Here

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 640px. 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

Column 1Column 2
TD 11TD 21
TD 12TD 22
TD 13TD 23
TD 13TD 24
TD 15TD 25

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 640px. 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

Column 1Column 2
TD 11TD 21
TD 12TD 22
TD 13TD 23
TD 13TD 24
TD 15TD 25

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 tab2) is visible on both small and large screens. However, another table ( class=tabl ) contains buttons to Show / Hide columns is visible only on small screen.
  2. The table supports merging of columns 'colspan=2' and 'colspan=3' and also merging of rows 'rowspan=2' features in 'th' element. The script can be customised for merging more than 3 columns.
  3. Please note that classes 'tab1', 'tab1', 'cs1', 'cs2', 'csp3, and 'csp4' are for Javascript code only.
  4. You may also see the working example of this table is functional on PPF Calculator page of this site.
Hide / Show Columns
Col. 1 Col. 2 + 3 4 Col. 5 + 6 + 7 Col. 8
Col. 1Col. 2 + 3Column 4Col. 5 + 6 + 7Col. 8
Col. 2Col. 3Col. 5Col. 6Col. 7
TD-11TD-12TD-13TD-14TD-15TD-16TD-17TD-18
TD-21TD-22TD-23TD-24TD-25TD-26TD-27TD-28
TD-31TD-32TD-33TD-34TD-35TD-36TD-37TD-38
TD-41TD-42TD-43TD-44TD-45TD-46TD-47TD-48
TD-51TD-52TD-53TD-54TD-55TD-56TD-57TD-58
Updated : July 9, 2020