Div Table

by Dhanck

HTML

<div class="fake-table">
  <div class="fake-header-row">
    <div class="fake-cell">col long name</div>
    <div class="fake-cell">col</div>
    <div class="fake-cell">col</div>
    <div class="fake-cell">col</div>
    <div class="fake-cell">col</div>
  </div>
  <div class="fake-row">
    <div class="fake-cell">cell</div>
    <div class="fake-cell">cell</div>
    <div class="fake-cell">cell</div>
    <div class="fake-cell">cell</div>
    <div class="fake-cell">cell</div>
  </div>
   <div class="fake-row">
    <div class="fake-cell">cell</div>
    <div class="fake-cell">cell</div>
    <div class="fake-cell">cell</div>
    <div class="fake-cell">cell</div>
    <div class="fake-cell">cell</div>
  </div>
   <div class="fake-row">
    <div class="fake-cell">cell</div>
    <div class="fake-cell">cell</div>
    <div class="fake-cell">cell</div>
    <div class="fake-cell">cell</div>
    <div class="fake-cell">cell</div>
  </div>
</div>

CSS

body {
  background-color: #fff;
}

.fake-table {
  display: table;
  width: 100%;
  font-family: Verdana, Arial, sans-serif;
  font-size:12px;
}

.fake-header-row {
  display: table-row;
  font-weight: bold;
}

.fake-row {
  display: table-row;
}
.fake-row:nth-child(odd) {
  background-color:#
}

.fake-cell {
  display: table-cell;
  border: 1px solid #F0F0F0;
  padding: 7px 15px;
  overflow: hidden;
  white-space: nowrap;
}