How you can create a table that fits on every screen size? Solution: CSS Responsive Table With HTML & jQuery, A CSS HTML Table Design.
I am sure that you know about HTML tables. Tables can use on may places on the web like in backend, frontend pricing table, comparing table, etc. If you are learning HTML & CSS or you have learned before, then you probably know that table in HTML is an important command.
Today you will learn to create an attractive & responsive table design with great UI. You can use it on your website or your current project because this is responsive & functional also. It’s a basic <td> <th> based table, but the CSS & jQuery make this unique. This table has a different layout & function on small screens.
So, Today I am sharing CSS Responsive Table With HTML & jQuery. A pure HTML & CSS table but the jQuery used for responsive functionality. This table has a toggle function for a small screen, that’s why I am using jQuery. Otherwise, all the elements style & designs are in CSS.
If you are thinking now how this table actually is, then see the preview given below.
Preview Of jQuery HTML Table
See this video preview to getting an idea of how this responsive table looks like.
Now you can see this visually. If you like this, then get the source code of its.
You May Also Like:
- CSS Sliding Navigation Buttons
- Show Scroll Percentage With Animation
- Responsive CSS Flexbox Design
- Vertical Timeline Design
CSS Responsive Table Source Code
Before sharing source code, let’s talk about this. I created a table using <tr> <th> <td>, but I add an extra <th> in every section with a class name. In extra <th> section I give class name responsive-toggle, It looks like this class= "responsive-toggle". I gave this name because this extra part is for responsive design or small screen.
In normal or large screen I 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 with a toggle feature. Basically, jQuery hide the main <TH> & show the extra <TH> on small screens. For creating it responsive I gave CSS @media query with many conditions.
As you can see on the preview, there is color fill on the table in even numbers of td. I the even numbers of rows using table tr:nth-of-type(even) CSS property. I have used a google font named Lato in this table design, for creating this good looking. There is a small part of JS because we are using jQuery.
Left other things you will understand after getting the codes. I can’t explain properly in writing there, when will see codes then you will understand how it works. If you got any trouble to understand you can ask me in the comment section. For creating this Responsive Table you have to create 3 files. First for HTML, second for CSS, & last for JavaScript or jQuery.
Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
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 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <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="style.css" rel="stylesheet"> </head> <body> <table> <thead> <tr class="headings"> <th>Keywords</th> <th>Volume</th> <th>Competition</th> <th>Posibility</th> <th>Budget</th> </tr> </thead> <tbody> <tr> <td>Website Design</td> <th class="responsive-toggle">volume</th><td>2,22,489</td> <th class="responsive-toggle">Competition</th><td>78</td> <th class="responsive-toggle">Posibility</th><td>15%</td> <th class="responsive-toggle">Budget</th><td>$ 1,500</td> </tr> <tr> <td>Digital Marketing Services</td> <th class="responsive-toggle">volume</th><td>1,54,728</td> <th class="responsive-toggle">Competition</th><td>87</td> <th class="responsive-toggle">Posibility</th><td>12%</td> <th class="responsive-toggle">Budget</th><td>$ 10,000</td> </tr> <tr> <td>Online Hotel Booking</td> <th class="responsive-toggle">volume</th><td>11,12,323</td> <th class="responsive-toggle">Competition</th><td>70</td> <th class="responsive-toggle">Posibility</th><td>5%</td> <th class="responsive-toggle">Budget</th><td>$ 60,000</td> </tr> <tr> <td>Online Dating</td> <th class="responsive-toggle">volume</th><td>55,477</td> <th class="responsive-toggle">Competition</th><td>45</td> <th class="responsive-toggle">Posibility</th><td>60%</td> <th class="responsive-toggle">Budget</th><td>$ 25,000</td> </tr> <tr> <td>Search Engine Optimization</td> <th class="responsive-toggle">volume</th><td>35,85,882</td> <th class="responsive-toggle">Competition</th><td>97</td> <th class="responsive-toggle">Posibility</th><td>2%</td> <th class="responsive-toggle">Budget</th><td>$ 67,650</td> </tr> <tr> <td>Learn HTML</td> <th class="responsive-toggle">volume</th><td>5,11,477</td> <th class="responsive-toggle">Competition</th><td>72</td> <th class="responsive-toggle">Posibility</th><td>45%</td> <th class="responsive-toggle">Budget</th><td>$ 50,000</td> </tr> <tr> <td>Book Movie Ticket</td> <th class="responsive-toggle">volume</th><td>14,44,555</td> <th class="responsive-toggle">Competition</th><td>91</td> <th class="responsive-toggle">Posibility</th><td>10%</td> <th class="responsive-toggle">Budget</th><td>$ 70,500</td> </tr> <tr> <td>Casion Online</td> <th class="responsive-toggle">volume</th><td>4,24,455</td> <th class="responsive-toggle">Competition</th><td>41</td> <th class="responsive-toggle">Posibility</th><td>40%</td> <th class="responsive-toggle">Budget</th><td>$ 1,000</td> </tr> <tr class="total"> <th>Total Budget</th> <td class="total-budget" colspan="4">$ 2,85,650</td> </tr> </tbody> </table> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
|
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 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ * { box-sizing: border-box; } body { font-family: 'Lato', sans-serif; color: #202020; } 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: #FF6B6D; } table tr:nth-of-type(even) td { background-color: #FFB2B3; } table .total th { background-color: white; } 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%; } } /** code by webdevtrick ( https://webdevtrick.com ) **/ * { box-sizing: border-box; } body { font-family: 'Lato', sans-serif; color: #202020; } 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: #FF6B6D; } table tr:nth-of-type(even) td { background-color: #FFB2B3; } table .total th { background-color: white; } 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%; } } |
function.js
The final step, Create a JS file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ $(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(); |
That’s It. Now you have successfully created CSS Responsive Table With HTML & jQuery. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
I have a great blog, I am looking forward to a new blog
Which themes are you using sir
Ion Mag
It would be better if you put an arrow(expand) in right in mobile view.
Thanks For your suggetion
Made a demo for this on CodePen: https://codepen.io/Tcip/pen/xxRLYeX