CSS Display Table with Cell Padding

by BenjaminRay

HTML

<div class="tbl">
  <div class="tbl-col"></div>
  <div class="tbl-col green"></div>
  <div class="tbl-row">
    <div class="tbl-cell">Contents 1</div>
    <div class="tbl-cell">Contents 2 (little longer)</div>
  </div>
  <div class="tbl-row">
    <div class="tbl-cell">Cont. 3</div>
    <div class="tbl-cell">Contents 4</div>
  </div>
</div>

CSS

.tbl {
  display: table;
  border-collapse: collapse;
}
.tbl-row {
  display: table-row;
}
.tbl-cell {
  display: table-cell;
  border: 1px solid #ff0000;
  padding: 10px;
}
.tbl-col {
  display: table-column;
}
.green {
  display: table-column;
  background-color: #ccffcc;
}