Flex Table

by mugur_serban

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/Dogfalo/materialize/a9ffd6f7/dist/css/materialize.min.css">
<div class="table">
  <div class="tr th">
    <div class="td"
      style="flex-grow: 2;">
      Name
    </div>
    <div class="td">
      Items Bought
    </div>
    <div class="td">
      Clicked
    </div>
    <div class="td">
      Duration
    </div>
    <div class="td">
      Lifetime Total
    </div>
    <div class="td">
      Total
    </div>
  </div>
  <div class="tr table-total">
    <div class="td"
      style="flex-grow: 2;">
      <b>Total</b>
    </div>
    <div class="td"
      style="justify-content: center;">
      <b>4102</b>
    </div>
    <div class="td"
      style="justify-content: center;">
      <b>2914</b>
    </div>
    <div class="td"
      style="justify-content: center;">
      <b>1341</b>
    </div>
    <div class="td"
      style="justify-content: flex-end;">
      <b>$12,118,329.15</b>
    </div>
    <div class="td"
      style="justify-content: flex-end;">
      <b>$4,036,930.16</b>
    </div>
  </div>
  <div class="tr">
    <div class="td"
      style="flex-grow: 2;">
      <span><a href="javascript:void(0)">Andrew Jackman</a></span>
    </div>
    <div class="td"
      style="justify-content: center;">
      <span>41</span>
    </div>
    <div class="td"
      style="justify-content: center;">
      <span>30</span>
    </div>
    <div class="td"
      style="justify-content: center;">
      <span>27</span>
    </div>
    <div class="td"
      style="justify-content: flex-end;">
      <span>$176.15</span>
    </div>
    <div class="td"
      style="justify-content: flex-end;">
      <span>$14.94</span>
    </div>
  </div>
  <div class="tr">
    <div class="td"
      style="flex-grow: 2;">
      <span><a href="javascript:void(0)">Oliver Ogden</a></span>
    </div>
    <div class="td"
      style="justify-content: center;">
      <span>9</span>
    </div>
    <div class="td"
      style="justify-content: center;">
     ...

CSS

.table {
  display: flex;
  flex-flow: column nowrap;
  font-size: .8rem;
  margin: 0.5rem;
  line-height: 1.5;
  border-bottom: 1px solid #d0d0d0;
  flex: 1 1 auto;
}

.th {
  display: none;
  font-weight: 700;
  background-color: #f2f2f2;
}

.th > .td {
  white-space: normal;
  justify-content: center;
}

.tr {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
}

.tr:nth-of-type(even) {
  background-color: #f2f2f2;
}

.tr:nth-of-type(odd) {
  background-color: #ffffff;
}

.td {
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 1;
  flex-basis: 100px;
  padding: 0.5em;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0px;
  white-space: nowrap;
  border-bottom: 1px solid #d0d0d0;
}