How to Create div based CSS Table without using HTML Table tag?

How to Create div based CSS Table without using HTML Table tag?

Assume in your HTML page you are going to display 5000 records using a Table. In this case HTML table tag creates problem during loading. Until 5000 records fetched from the database, table will not render. This delay creates performance issue in web development. To avoid this scenario div is introduced. Div loads faster then a table. Partial loading feature supported by div. While all the row & columns of a table comes with in the single control div presents each row & column independently. Let us share the example how to create div based CSS table.

Look at the example below here I did created similar to table structure using Div & CSS. To make this simple I used only 3 CSS classes tableHeader, row & column. In HTML followed by the basic principle creating the row & inside row creating columns. To separate tableHeader in place of row class I used tableHeader.

CSS-Table-using-Div.htm

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>How to Create div based CSS Table?</title>
<style type="text/css">
.tableHeader
{
background: #000;
color: #fff;
display: table-row;
font-weight: bold;
}
.row
{
display: table-row;
}
.column
{
display: table-cell;
border: thin solid #000;
padding: 6px 6px 6px 6px;
}
</style>
</head>
<body>
<div class="tableHeader">
<div class="column">Employee Name</div>
<div class="column">Designation</div>
<div class="column">Salary</div>
</div>
<div class="row">
<div class="column">Biswabhusan Panda</div>
<div class="column">Sr. Team Lead</div>
<div class="column">80000 INR</div>
</div>
<div class="row">
<div class="column">Supriti Kabi</div>
<div class="column">Software Engineer</div>
<div class="column">60000 INR</div>
</div>
<div class="row">
<div class="column">Nibedita Panda</div>
<div class="column">Jr. Software Engineer</div>
<div class="column">45000 INR</div>
</div>
</body>
</html>