EN
CSS - how to create table with pure styles
3
points
In this short article we would like to show how to create table with CSS.
Quick solution:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
div.table {
display: table;
}
div.tr {
display: table-row;
}
div.td {
width: 50px; /* <-------- optional */
display: table-cell;
}
</style>
</head>
<body>
<div class="table">
<div class="tr">
<div class="td">H 1</div>
<div class="td">H 2</div>
<div class="td">H 3</div>
</div>
<div class="tr">
<div class="td">B 1.1</div>
<div class="td">B 1.2</div>
<div class="td">B 1.3</div>
</div>
<div class="tr">
<div class="td">B 2.1</div>
<div class="td">B 2.2</div>
<div class="td">B 2.3</div>
</div>
</div>
</body>
</html>