Back

HTML notes

Making div-tables

This example is using div-tables

/* minimal */
.table {
 display: table;
}
.row {
 display: table-row-group;
}
.cell {
 display: table-cell;
}
<!-- minimal -->
<div class='table'>
 <div class='row'>
  <div class='cell'>a1</div>
  <div class='cell'>b1</div>
 </div>
 <div class='row'>
  <div class='cell'>a2</div>
  <div class='cell'>b2</div>
 </div>
</div>
/* minimal */
.table {
 display: table;
}
.row {
 display: table-row-group;
}
.cell {
 display: table-cell;
}

/* borders + padding */ 
.cell {
 padding: 3px;
 border-bottom: 1px solid #999;
 border-right: 1px solid #999;
}
.row:nth-child(1) .cell {
 border-top: 1px solid #999;
}
.cell:nth-child(1) {
 border-left: 1px solid #999;
}

/* vertically center cell child-div */ 
.cell {
 vertical-align: middle;
}
.inner {
  display: inline-block;
}
 
 
<!-- div with class='inner' will be vertically centered -->
<div class='table'>
 <div class='row'>
  <div class='cell'><div class='inner'>a1</div></div>
  <div class='cell'><div class='inner'>b1</div></div>
 </div>
 <div class='row'>
  <div class='cell'><div class='inner'>a2</div></div>
  <div class='cell'><div class='inner'>b2</div></div>
 </div>
</div>