CSS Responsive Table using HTML, CSS, JavaScript
The first thing which comes in mind how you can create the table that fits on every media screen size?
Answer:– A CSS HTML Table creates with the help of HTML & CSS and & JQuery
If I am not wrong that I think you have the basic knowledge of HTML Tables. The table can be used on where places when we need such as backend, frontend, comparing table and pricing table, etc.
when you are learning HTML and CSS, you will be also aware HTML table all command. which are necessary for creating the tables.
In these tutorials, you will learn how to create Responsive Table Design and Attractive table with Great UI which responsive table will fit in all media screens.
The basic table creates with a command like as <table> <td> <th> <tr> but the CSS and JQuery make this Unique Table. By the way, the table has a different layout and function for large, medium and small screens.
Therefore, you will learn in CSS responsive Table with HTML and jQuery.as a result, jQuery used for responsive functionality. this table has a toggle function for a small screen, that’s why I am using jQuery for the table functionalities. otherwise, you know all the elements styles and design are built with CSS.
CSS Responsive Table Source Code and How to Apply table Source Code?
first of all, before sharing the code we will discuss how to used code and table command.
when I create the basic table using <td> <th> <tr> but here I add an extra <th> in
every section with a class name. on the other hand, In extra <th> section I give the class
name such as responsive-toggle, I will look like this class=”responsive-toggle” this
name given because of this extra part is for responsive design or small screen media devices.
Therefore in the case of normal or large media screen devices, I will put display: none;
to this extra <th> part. this part is handling jQuery, turn on the display of this extra part
on the small screen media devices with toggle features. Basically, for the result jQuery
hide the main <th> and show the extra <th> on small screen media devices. as a result,
for creating it responsive I will provide CSS @media query with different media screen
devices conditions.
Therefore, as you see the result, the color fills on the table in even numbers of td. here, for the even numbers of rows using table tr : nth-of-type(even) CSS property. therefore its is a small part of JS because of we are using jQuery.
I hope when you will see the given below code segments you will be understood better how it works, by the way, if you have facing trouble to understand, you can comment your problem in the comment section for creating this responsive Table.
Therefore, for creating a responsive table you have to create three (3) files. First of HTML, Second for CSS, & last for Javascript or jQuery.
Step I: Create an HTML file named ‘index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<html> <head> <title>HTML CSS Responsive Table</title> <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css"> <link href="css/stylesheet.css" rel="stylesheet"> </head> <body> <table> <thead> <tr class="headings"> <th>Brand Name</th> <th>Product Name</th> <th>Total Qty.</th> <th>Sales Qty.</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>Samsung</td> <th class="responsive-toggle">Product Name</th><td> Samsung G6- Anorid 4.8</td> <th class="responsive-toggle">Total Qty.</th><td>78</td> <th class="responsive-toggle">Sales Qty.</th><td>30</td> <th class="responsive-toggle">Price</th><td>$ 700</td> </tr> <tr> <td>Dell</td> <th class="responsive-toggle">Product Name</th><td>Dell Laptop i5 2345</td> <th class="responsive-toggle">Total Qty.</th><td>100</td> <th class="responsive-toggle">Sales Qty.</th><td>50</td> <th class="responsive-toggle">Price</th><td>$ 1,300</td> </tr> <tr> <td>Nikon</td> <th class="responsive-toggle">Product Name</th><td>Nikon Camera HD 5678</td> <th class="responsive-toggle">Total Qty.</th><td>200</td> <th class="responsive-toggle">Sales Qty.</th><td>110</td> <th class="responsive-toggle">Price</th><td>$ 1,800</td> </tr> <tr> <td>Apple</td> <th class="responsive-toggle">Product Name</th><td>Apple Desktop</td> <th class="responsive-toggle">Total Qty.</th><td>50</td> <th class="responsive-toggle">Sales Qty.</th><td>20</td> <th class="responsive-toggle">Price</th><td>$ 2,500</td> </tr> <tr> <td>Sony</td> <th class="responsive-toggle">Product Name</th><td>Sony LCD 7654</td> <th class="responsive-toggle">Total Qty.</th><td>90</td> <th class="responsive-toggle">Sales Qty.</th><td>15</td> <th class="responsive-toggle">Price</th><td>$ 1,300</td> </tr> <tr class="total"> <th>Total Budget</th> <td class="total-budget" colspan="4">$ 4,68,128</td> </tr> </tbody> </table> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="JS/function.js"></script> </body> </html> |
Step 2: Create an external stylesheet and put the code on as name “stylesheet.css”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 |
body { font-family: 'Lato', sans-serif; color: #202020; } * { box-sizing: border-box; } table { width: 100%; border-collapse: collapse; text-align: left; overflow: hidden; } table td, table th { border-top: 1px solid #ECF0F1; padding: 10px; } table td { border-left: 1px solid #ECF0F1; border-right: 1px solid #ECF0F1; } table th { background-color: #65b50e; color: #000; } table tr:nth-of-type(even) td { background-color: #c9cac4; } table .total th { background-color: #ccc; } table .total td { text-align: right; font-weight: 700; } .responsive-toggle { display: none; } @media only screen and (max-width: 300px) { table tr th:not(:first-child) { width: 50%; font-size: 14px; } table tr td:not(:first-child) { width: 50%; font-size: 14px; } } @media only screen and (max-width: 765px) { p { display: block; font-weight: bold; } table tr td:not(:first-child), table tr th:not(:first-child), table tr td:not(.total-budget) { display: none; } table tr:nth-of-type(even) td:first-child { background-color: #FFB2B3; } table tr:nth-of-type(odd) td:first-child { background-color: white; } table tr:nth-of-type(even) td:not(:first-child) { background-color: white; } table tr th:first-child { width: 100%; display: block; } table tr th:not(:first-child) { width: 40%; transition: transform 0.4s ease-out; transform: translateY(-9999px); position: relative; z-index: -1; } table tr td:not(:first-child) { transition: transform 0.4s ease-out; transform: translateY(-9999px); width: 60%; position: relative; z-index: -1; } table tr td:first-child { display: block; cursor: pointer; } table tr.total th { width: 25%; display: inline-block; } table tr td.total-budget { display: inline-block; transform: translateY(0); width: 75%; } } @media only screen and (max-width: 300px) { table tr th:not(:first-child) { width: 50%; font-size: 14px; } table tr td:not(:first-child) { width: 50%; font-size: 14px; } } @media only screen and (max-width: 765px) { p { display: block; font-weight: bold; } table tr td:not(:first-child), table tr th:not(:first-child), table tr td:not(.total-budget) { display: none; } table tr:nth-of-type(even) td:first-child { background-color: #c9cac4; } table tr:nth-of-type(odd) td:first-child { background-color: white; } table tr:nth-of-type(even) td:not(:first-child) { background-color: white; } table tr th:first-child { width: 100%; display: block; } table tr th:not(:first-child) { width: 40%; transition: transform 0.4s ease-out; transform: translateY(-9999px); position: relative; z-index: -1; } table tr td:not(:first-child) { transition: transform 0.4s ease-out; transform: translateY(-9999px); width: 60%; position: relative; z-index: -1; } table tr td:first-child { display: block; cursor: pointer; } table tr.total th { width: 25%; display: inline-block; } table tr td.total-budget { display: inline-block; transform: translateY(0); width: 75%; } } |
Step 3: Create a JavaScript file as name “function.js”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(window).on('resize', function() { if ($(this).width() < 765) { $('tr td:first-child').click(function(){ $(this).siblings().css({'display': 'inline-block'}); var $this = $(this); setTimeout(function(){ $this.siblings().css('transform', 'translateY(0)'); },0); $('tr td:first-child').not($(this)).siblings().css({'display': 'none', 'transform': 'translateY(-9999px)'}); }); } else if ($(this).width() > 760) { $( "tr td:first-child").unbind( "click" ); $('tr td:first-child').siblings().css({'display': '', 'transform': ''}); } }).resize(); |
Table Responsive Small Screen View
About Author
