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 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

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 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

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 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.
Col. 1 Col. 2 + 3 Col. 4 Col. 5 + 6 + 7 Col. 8

Col. 1Col. 2 + 3Col. 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 : Nov 26, 2020
You may like to View / Use / Download
Income Tax Calculator AY 2021-22
Calculate Taxable Income and Income Tax Liability of Individuals for AY 2021-22.
Income Tax Slabs / Rates AY 2021-22
View income Tax Rates & Slabs for AY 2021-22 as per Existing and New Tax Regimes.
Advance Tax Calculator AY 2021-22
Calculate Advance Tax payable by Individuals on various due dates.
Interest u/s 234A B C Calculator
Calculate Interest payable under Section 234A, 234B and 234C.
TDS Calculator AY 2021-22
Calculate TDS deductible on Salary and Other payments to different payees for AY 2021-22.
TDS Rates AY 2021-22
TDS Rates (Revised) for all payments and payees for AY 2021-22
Tax Saving Calculator
Calculate Tax savings for various Tax Saving investments.
Post Office Small Saving Calculators
Use Calculators for NSC, PO MIS, SCSS, PO RD, PO TD and KVP Schemes.
PPF Calculator 2020
Use PPF calculator for calculation of Maturity Date, Maturity Value, Interest and Return on Investment.
SSY Calculator 2020
Use SSY calculator for calculation of Maturity Value, Interest and Return on Investment.
Challan 280 in fillable Excel and PDF
Download fillable Income Tax Challan 280 in Excel / PDF
TDS form 16 in Excel with Calculation formulas
Download fillable Income Tax Form 16 in Excel with auto calculation formulas.
PAN & TAN forms and Annexures in fillable PDF
Download fillable PAN and TAN forms
Post Office forms in Fillable PDF
Download fillable Post Office forms
SBI Lending Rates for Perquisite Valuation
View SBI Lending Rates for Perquisite Valuation
PMVVY Calculator
PMVVY (Pradhan Mantri Vaya Vandana Yojana) 2020 Calcultor