Refer
https://html-cleaner.com/features/replace-html-table-tags-with-divs/
Notes: Not using the display: table in style of div tag
Practice:
https://codepen.io/manhnv83/full/jwJeGp/
HTML Source
<!DOCTYPE html>
<html>
<head>
<style>
.rTable {
display: table;
width: 100%;
}
.rTableRow {
display: table-row;
}
.rTableHeading {
display: table-header-group;
background-color: #ddd;
}
.rTableCell, .rTableHead {
display: table-cell;
padding: 3px 10px;
border: 1px solid #999999;
}
.rTableHeading {
display: table-header-group;
background-color: #ddd;
font-weight: bold;
}
.rTableFoot {
display: table-footer-group;
font-weight: bold;
background-color: #ddd;
}
.rTableBody {
display: table-row-group;
}
</style>
<html>
<head>
<style>
.rTable {
display: table;
width: 100%;
}
.rTableRow {
display: table-row;
}
.rTableHeading {
display: table-header-group;
background-color: #ddd;
}
.rTableCell, .rTableHead {
display: table-cell;
padding: 3px 10px;
border: 1px solid #999999;
}
.rTableHeading {
display: table-header-group;
background-color: #ddd;
font-weight: bold;
}
.rTableFoot {
display: table-footer-group;
font-weight: bold;
background-color: #ddd;
}
.rTableBody {
display: table-row-group;
}
</style>
</head>
<body>
<h2>Phone numbers</h2>
<div class="rTable">
<div class="rTableRow">
<div class="rTableHead"><strong>Name</strong></div>
<div class="rTableHead"><span style="font-weight: bold;">Telephone</span></div>
<div class="rTableHead"> </div>
</div>
<div class="rTableRow">
<div class="rTableCell">John</div>
<div class="rTableCell"><a href="tel:0123456785">0123 456 785</a></div>
<div class="rTableCell"><img src="https://media.giphy.com/media/8GY3UiUjwKwhO/source.gif" width=60 height=auto alt="checked" /></div>
</div>
<div class="rTableRow">
<div class="rTableCell">Cassie</div>
<div class="rTableCell"><a href="tel:9876532432">9876 532 432</a></div>
<div class="rTableCell"><img src="https://media.giphy.com/media/8GY3UiUjwKwhO/source.gif" width=60 height=auto alt="checked" /></div>
</div>
</div>
</body>
</html>
<body>
<h2>Phone numbers</h2>
<div class="rTable">
<div class="rTableRow">
<div class="rTableHead"><strong>Name</strong></div>
<div class="rTableHead"><span style="font-weight: bold;">Telephone</span></div>
<div class="rTableHead"> </div>
</div>
<div class="rTableRow">
<div class="rTableCell">John</div>
<div class="rTableCell"><a href="tel:0123456785">0123 456 785</a></div>
<div class="rTableCell"><img src="https://media.giphy.com/media/8GY3UiUjwKwhO/source.gif" width=60 height=auto alt="checked" /></div>
</div>
<div class="rTableRow">
<div class="rTableCell">Cassie</div>
<div class="rTableCell"><a href="tel:9876532432">9876 532 432</a></div>
<div class="rTableCell"><img src="https://media.giphy.com/media/8GY3UiUjwKwhO/source.gif" width=60 height=auto alt="checked" /></div>
</div>
</div>
</body>
</html>
