Search

How to Make Responsive Div Tables using CSS without Tag

    Ketan Vyawahare
Listen to this article

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 codeCSS code
<div id=“resp-table”>
</div>
#resp-table {
width: 100%;
display: table;
}

Step 2: Add a Table Caption

HTML codeCSS 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 codeCSS 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 codeCSS 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 codeCSS code
<div id=“resp-table-body”>
</div>
#resp-table-body{
display: table-row-group;
}

Step 6: Create Table Rows

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

Short on time? Let our WordPress core contributors help make changes quickly! Get In Touch

Step 8: Create the Table Footer

HTML codeCSS 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 codeCSS 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:

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!

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.

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

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