Develop html table using css div tags

This tutorial will explain how to form HTML table using css div tags without using table tags. This tutorial supports fixed header on scrolling table body and support responsive table.

Let’s start our tutorial.

With support of css, jQuery and div tags, we can achieve HTML table without using HTML table tags.

Form the div layout to achive div table without using table tags

In html table tags we use in the following hierarchy table->body->tr->td. Same way we have to form layout using div tags and give the proper class name like below code.

<div class="divTable">
    <div class="divTableBody">
        <div class="divTableRow">
            <div class="divTableHead">Header Cell 1</div>
            <div class="divTableHead">Header Cell 2</div>
            <div class="divTableHead">Header Cell 3</div>
        </div>
        <div class="divTableRow">
            <div class="divTableCell">Header Cell 1</div>
            <div class="divTableCell">Header Cell 2</div>
            <div class="divTableCell">Header Cell 3</div>
        </div>
    </div>
</div>

Find the table class name

• divTable – will considered as <table> tag
• divTableBody – will considered as <tbody> tag
• divTableRow – will considered as <tr> tag
• divTableHead – will considered as <th> tag
• divTableCell – will considered as <td> tag

Above div tags will replace the actual HTML table tags

CSS code to achieve the HTML table tags styles

Below listed css styles will replace the actual html table styling

• display: table – Will consider the div as table
• display: table-row-group – Will consider the div as table body
• display: table-row – Will consider the div as table row
• display: table-cell – Will consider the div as table cell

CSS code below

<style>
    .divTableParent{
        max-height: 400px;
        overflow: auto;
        overflow-x: hidden;
    }
    .divTable {
        display: table;
        width: 100%;
        border-bottom: 1px solid rgba(44, 46, 46, 0.15);
        border-right: 1px solid rgba(44, 46, 46, 0.15);
        font-size: 12px;
    }
    .divTableBody {
        display: table-row-group;
    }
    .divTableRow {
        display: table-row;
        position: relative;
    }
    .divTableHead {
        background: #191919 !important;
        color: white;
        border-right: 1px solid rgb(41, 41, 41);
        font-weight: 700;
    }
    .divTableCell, .divTableHead {
        border: 1px solid rgba(44, 46, 46, 0.15);
        display: table-cell;
        padding: 8px;
    }
    .divTableCell, .divTableHead {
        border-bottom: 0px;
        border-right: 0px;
    }
</style>

HTML code below to achieve the table without table tags

<div class="divTableParent">
    <div class="divTable">
        <div class="divTableBody">
            <div class="divTableRow divTableHeadHold" style="position: absolute;">
                <div class="divTableHead">Header Cell 1</div>
                <div class="divTableHead">Header Cell 2</div>
                <div class="divTableHead">Header Cell 3</div>
            </div>
        </div>
    </div>
    <div class="divTable divTableContent">
        <div class="divTableBody">
            <div class="divTableRow">
                <div class="divTableHead">Header Cell 1</div>
                <div class="divTableHead">Header Cell 2</div>
                <div class="divTableHead">Header Cell 3</div>
            </div>
            <div class="divTableRow">
                <div class="divTableCell">Content Cell 1</div>
                <div class="divTableCell">Content Cell 2</div>
                <div class="divTableCell">Content Cell 3</div>
            </div>
            <div class="divTableRow">
                <div class="divTableCell">Content Cell 1</div>
                <div class="divTableCell">Content Cell 2</div>
                <div class="divTableCell">Content Cell 3</div>
            </div>
            <div class="divTableRow">
                <div class="divTableCell">Content Cell 1</div>
                <div class="divTableCell">Content Cell 2</div>
                <div class="divTableCell">Content Cell 3</div>
            </div>
            <div class="divTableRow">
                <div class="divTableCell">Content Cell 1</div>
                <div class="divTableCell">Content Cell 2</div>
                <div class="divTableCell">Content Cell 3</div>
            </div>
            <div class="divTableRow">
                <div class="divTableCell">Content Cell 1</div>
                <div class="divTableCell">Content Cell 2</div>
                <div class="divTableCell">Content Cell 3</div>
            </div>
            <div class="divTableRow">
                <div class="divTableCell">Content Cell 1</div>
                <div class="divTableCell">Content Cell 2</div>
                <div class="divTableCell">Content Cell 3</div>
            </div>
            <div class="divTableRow">
                <div class="divTableCell">Content Cell 1</div>
                <div class="divTableCell">Content Cell 2</div>
                <div class="divTableCell">Content Cell 3</div>
            </div>
            <div class="divTableRow">
                <div class="divTableCell">Content Cell 1</div>
                <div class="divTableCell">Content Cell 2</div>
                <div class="divTableCell">Content Cell 3</div>
            </div>
            <div class="divTableRow">
                <div class="divTableCell">Content Cell 1</div>
                <div class="divTableCell">Content Cell 2</div>
                <div class="divTableCell">Content Cell 3</div>
            </div>
        </div>
    </div>
</div>

jQuery code to achieve the fixed header and responsive table

Below code needed if you need fixed header while scrolling.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    $( document ).ready(function() {
        resizeWindow();
        $( window ).resize(function() {
            resizeWindow();
        });

        function resizeWindow(){
            var bodyEl = $( ".divTableBody .divTableRow:nth-child(2) div");
            for (i = 1; i <= bodyEl.length; i++) {
                var bodyCellElWidth = $( ".divTable.divTableContent .divTableRow:nth-child(1) div:nth-child("+i+")").width();
                $(".divTableHeadHold div:nth-child("+i+")").width(bodyCellElWidth);
            };
        };
    });
</script>

Demo