The quickest way to create responsive tables is by using CSS and <div> tag. Creating responsive tables using CSS without the traditional <table> tag can enhance the flexibility and design of your web pages. By utilizing CSS properties effectively, you can achieve visually appealing and functional tables that adapt well to different screen sizes.
Data representation is a crucial part of any website. If you have or manage a lot of data, but do not have a proper way to represent it, then it won’t be understood by anyone and is useless.
In most cases, tabular representation is an important type of data representation especially when it concerns statistical data.
In web design, tables are conventionally created using <table></table> tags. Creating a table is a bit of a challenging task, especially when the concern is making it responsive. And if you’re a WordPress developer then you might know, that many themes do not support responsive tables. Styling the tables is a challenge too, and there isn’t much option.
So, how can we overcome this problem? It’s very simple.
No, the solution is not JS...
You might be thinking that we need a jQuery plugin or JavaScript plugin to solve this issue. But it is not so. You do not need to install any plugin or additional framework. You can simply do this using the HTML <div> tag and some CSS styling.
Amazed?! Confused?! Don’t be! 😀
By the end of this article, you will be a master in creating good responsive HTML tables! I’ll guide you through the whole process.
So, it’s all about CSS?
Yes.
Using only CSS we can achieve this because of a special property provided. This styling is not used frequently used and hence many developers might not know about the same. We can use the display property and provide a width for all our divs to make them look like a table automatically.
How to use the ‘display’ property to represent a table?
The below table gives you the relation between a ‘table‘ tag and the corresponding supported CSS property to represent the same element. So, when creating a table, all you need to do is, instead of the HTML ‘table‘ tag, merely use the ‘div‘ tag and add the corresponding CSS to display a table.
| <table> | {display:table} |
| <tr> | {display: table-row} |
| <thead> | {display: table-header-group} |
| <tbody> | {display: table-row-group} |
| <tfoot> | {display: table-footer-group} |
| <col> | {display: table-column} |
| <colgroup> | {display: table-column-group} |
| <td>, <th> | {display: table-cell} |
| <caption> | {display: table-caption} |
Here’s an example to walk you through the process of creating a table.
Let’s begin.
A table has 3 primary parts namely the table header, table body, and table footer. So first of all, let’s create a master div i.e. the main table div in which we will create a table.
Note: For the below steps, you need to add the HTML code in your template or a page on your website, and the CSS code should be added to your theme’s style.css file.
Step 1: Create a Master Div for the Div Table
| HTML code | CSS code |
| <div id=“resp-table”> </div> | #resp-table { width: 100%; display: table; } |
Step 2: Add a Table Caption
| HTML code | CSS code |
| <div id=“resp-table-caption”> Responsive Table without Table tag </div> | #resp-table-caption{ display: table-caption; text-align: center; font-size: 30px; font-weight: bold; } |
Step 3: Create a Table Header Row
| HTML code | CSS code |
| <div id=“resp-table-header”></div> | #resp-table-header{ display: table-header-group; background-color: gray; font-weight: bold; font-size: 25px; } |
Does this feel overwhelming? Let our WordPress experts help make better, more responsive tables. Get In Touch
Step 4: Add Table Header Cells
| HTML code | CSS code |
| <div class=“table-header-cell”> Header 1 </div> <div class=“table-header-cell”> Header 2 </div> <div class=“table-header-cell”> Header 3 </div> <div class=“table-header-cell”> Header 4 </div> <div class=“table-header-cell”> Header 5 </div> | .table-header-cell{ display: table-cell; padding: 10px; text-align: justify; border-bottom: 1px solid black; } |
Step 5: Create the Table Body
| HTML code | CSS code |
| <div id=“resp-table-body”> </div> | #resp-table-body{ display: table-row-group; } |
Step 6: Create Table Rows
| HTML code | CSS code |
| <div class=“resp-table-row”> </div> | .resp-table-row{ display: table-row; } |
Duplicate these rows as often as needed to create a table as desired.
Step 7: Create Table Cells in the Rows
| HTML code | CSS code |
| <div class=“table-body-cell”> Cell 1–1 </div> <div class=“table-body-cell”> Cell 1–2 </div> <div class=“table-body-cell”> Cell 1–3 </div> <div class=“table-body-cell”> Cell 1–4 </div> <div class=“table-body-cell”> Cell 1–5 </div> | .table-body-cell{ display: table-cell; } |
Copy these cells in each row you’ve created.
Short on time? Let our WordPress core contributors help make changes quickly! Get In Touch
Step 8: Create the Table Footer
| HTML code | CSS code |
| <div id=“resp-table-footer”> </div> | #resp-table-footer { display: table-footer-group; background-color: gray; font-weight: bold; font-size: 25px; color: rgba(255, 255, 255, 0.45); } |
Step 9: Add Footer Cells
| HTML code | CSS code |
| <div class=“table-footer-cell”> Footer 1 </div> <div class=“table-footer-cell”> Footer 2 </div> <div class=“table-footer-cell”> Footer 3 </div> <div class=“table-footer-cell”> Footer 4 </div> <div class=“table-footer-cell”> Footer 5 </div> | .table-footer-cell{ display: table-cell; padding: 10px; text-align: justify; border-bottom: 1px solid black; } |
Once again, create as many cells as needed.
Time to Test
Now, you can check your code template by opening the HTML page in a browser. The result should be something along the lines of this:
What about responsiveness?
Now, you may be thinking how to make this table responsive?! But guys! You’ve already made the table responsive!
Don’t believe it?! Just check the responsiveness of the same page using developer tools or by resizing the window. Amazed?
All this is possible because of the ‘display’ properties you used. Intrinsically these properties are responsive. You just need to apply them properly. Rest all is taken care of by the browser and your stylesheet. 🙂
So go ahead, create tables, and share your views with us. We’d like to see the tables you’ve created!
If you feel stuck at any point or need professional help with customizing your WordPress website, get in touch with us. One of our WordPress experts will get on a call with you to help you on priority.
25 Responses
How to span a cell over 2 cells in the table-body?
Hi.
I would like to create 3 columns under each header. So in your example I should have 15 columns instead. Is that possible??
Thanks
Hi David,
Apologies for the delayed response!
Could you please explain your requirement in detail?
Thanks! this helped me a lot!
I didn’t need headed. But if i skip that, i am not getting table structure.
below is my html page code :
#resp-table {
width: 100%;
display: table;
}
#resp-table-caption{
display: table-caption;
text-align: center;
font-size: 30px;
font-weight: bold;
}
#resp-table-header{
display: table-header-group;
background-color: gray;
font-weight: bold;
font-size: 25px;
}
.table-header-cell{
display: table-cell;
padding: 10px;
text-align: justify;
border-bottom: 1px solid black;
}
#resp-table-body{
display: table-row-group;
}
.resp-table-row{
display: table-row;
}
.table-body-cell{
display: table-cell;
}
Blog on Technologies
Header 1
Header 2
Header 3
Cell 1–1
Cell 1–2
Cell 1–3
Cell 1–1
Cell 1–2
Cell 1–3
Hello,
Thanks for reading and implementing this article!
Could you please share your HTML code as well?
What what was the end result here? I tried and got the same output. Nothing like the example table.
Hello Anon,
Could you please share your html and css with me on [email protected]?
Great example of Div based table
thanks
Hi Ketan, I am getting all headers, columns and cells are vertically aligned and doesn’t looks like a table format. Is there anything I am missing. I just copied all the CSS codes into my css file and html to my RazorView. Please help me anything I am missing and I am new to css?
Thanks,
Bins
Hello Bins,
Thank you for trying through this article!
Could you please share me your html file and CSS file on [email protected]?
Hi Ketan,
I have already sent the css and html file for your reference, please review and confirm me on the issues with fix to work as expected.
Thanks,
Bins
Hi Bins,
I have replied you on the email as follows:
Could you please send plain HTML file and the CSS code only with table css?
And please give a try like this.
The double quotes are a bit different. Current double quotes are like this:
<div id=“resp-table-header”>
Replace them with standard double quotes:
<div id=“resp-table-header“>
Copy both the lines in your code editor and try to observe the difference.
If this solution still does not work then let me know with the files I specified above.
Thanks Ketan for the quick response. Issue is resolved and as per your review I can see my style sheet was not loading hence its not applied to my divs. Now its working fine…thanks a lot.
Hi Ketan,
It is possible to make table header position fix, because when data is too larger then need scroll table body without scrolling header.
Thanks,
Vijaykumar
Hi Ketan,
How to make table head position fix.
Thanks
Vijaykumar
I realize this is an old article but I really need this div table to work for me and I can’t seem to make your instructions work for me. Here is my html with inline css for you to look over and hopefully see what I am missing. Thanks in advance.
Paul
Untitled Document
#resp-table {
width: 100%;
display: table;
}
#resp-table-caption{
display: table-caption;
text-align: center;
font-size: 30px;
font-weight: bold;
}
#resp-table-header{
display: table-header-group;
background-color: gray;
font-weight: bold;
font-size: 25px;
}
#resp-table-body{
display: table-row-group;
}
#resp-table-footer {
display: table-footer-group;
background-color: gray;
font-weight: bold;
font-size: 25px;
color: rgba(255, 255, 255, 0.45);
}
.table-header-cell{
display: table-cell;
padding: 10px;
text-align: justify;
border-bottom: 1px solid black;
}
.resp-table-row{
display: table-row;
}
.table-body-cell{
display: table-cell;
}
.table-footer-cell{
display: table-cell;
padding: 10px;
text-align: justify;
border-bottom: 1px solid black;
}
Responsive Div Table
Responsive Table without Table tag
Header 1
Header 2
Header 3
Header 4
Header 5
Cell 1–1
Cell 1–2
Cell 1–3
Cell 1–4
Cell 1–5
Footer 1
Footer 2
Footer 3
Footer 4
Footer 5
Hello Paul,
Thank you for implementing through this article and apologize for the delayed response!
Seems you have copied the CSS from my article only. Could you share your CSS and HTML files with us through the contact form?
Hi Ketan,
I want to implement a scrollable table body with your example code could you help me in that.
Thanks
Hello Srikanth,
Thank you for visiting our blog!
Could you please let us know what exact problem you are facing to make it scrollable?
Hi Ketan,
Thanks for the response,
I need a table with a fixed table header of height 60px and table body height should be fixed(100vh – 60px). If I’m having 100 rows, Now I want to scroll the rows which are in the table body(height (100vh – 60px)). I don’t want to scroll the whole table with the header.
Thanks
Could you please share the code.
because i am not getting as expection.
Why would you use the table tag markup to demonstrate a div table!
It’s a good thing the concept is sound.
Can the data in the tables be sorted and search with this application ?