Search
Close this search box.
Search

How to Create Responsive Tables using CSS without <table> Tag

Listen to this article

Data representation is a crucial part on 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 of no value.

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.

Basically, 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 in your theme’s style.css file.

Step 1: Create Master Div for the 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;
}

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 many times as you need to create a table as desired.

Step 7: Create Table Cells in the Rows

HTML code CSS code
<div class=“table-body-cell”>
Cell 11
</div>
<div class=“table-body-cell”>
Cell 12
</div>
<div class=“table-body-cell”>
Cell 13
</div>
<div class=“table-body-cell”>
Cell 14
</div>
<div class=“table-body-cell”>
Cell 15
</div>
.table-body-cell{
display: table-cell;
}

Copy these cells in each row you’ve created.

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 around the lines of this:

responsive-table-with-css

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!

Psst: If you liked this, you will definitely find this guide beneficial – Fundamentals of Building a Successful Website. Do check it out!

Ketan Vyawahare

Ketan Vyawahare

25 Responses

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

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

    1. Hello,

      Thanks for reading and implementing this article!

      Could you please share your HTML code as well?

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

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

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

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

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

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

    1. 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?

  6. Hi Ketan,

    I want to implement a scrollable table body with your example code could you help me in that.

    Thanks

    1. Hello Srikanth,

      Thank you for visiting our blog!

      Could you please let us know what exact problem you are facing to make it scrollable?

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

  8. Why would you use the table tag markup to demonstrate a div table!
    It’s a good thing the concept is sound.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads