Таблица на основе дивов

by fersterin

HTML

<!-- 
<table> имеет display: table
.cell имеет display: table-cell  (td)
.row имеет display: table-row  
-->
<div class="wrapper">
  <div class="table">
    <div class="row header">
      <div class="cell">Lorem ipsum.</div>
      <div class="cell">Provident, odio.</div>
      <div class="cell">Possimus, placeat.</div>
      <div class="cell">Fugit, harum.</div>
    </div>
    <div class="row">
      <div class="cell">Lorem ipsum.</div>
      <div class="cell">A, veniam.</div>
      <div class="cell">Optio, illo.</div>
      <div class="cell">Saepe, quos.</div>
    </div>
    <div class="row">
      <div class="cell">Lorem ipsum.</div>
      <div class="cell">Facilis, vel.</div>
      <div class="cell">Voluptate, quisquam?</div>
      <div class="cell">Aperiam, repellat.</div>
    </div>
    <div class="row">
      <div class="cell">Lorem ipsum.</div>
      <div class="cell">Facilis, vel.</div>
      <div class="cell">Voluptate, quisquam?</div>
      <div class="cell">Aperiam, repellat.</div>
    </div>
  </div>
</div>

CSS

.wrapper {
  margin: 0 auto;
  max-width: 800px;
  padding: 20px;
}
.table {
  display: table;
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/* Строки */
.row {
  display: table-row;
  background: #f6f6f6;
}
.row:nth-of-type(odd) {
  background: #e9e9e9;
}
.row.header {
  font-weight: bold;
  background: green;
  color: #fff;
}
.cell {
  display: table-cell;
  padding: 6px 12px;
}