Reply To: How to build this complex (seemingly) table layout

[Mottie]

You really shouldn’t use tables for that. I would recommend using a css column layout (demo)

HTML

<div class="row">
  <div class="column">
    <div class="cell">
      <p>2:00<span>PM</span> Jim Smith</p>
      <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 15 min</em>
    </div>
    <div class="cell">
      <p>2:15<span>PM</span> Patient Name</p>
      <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 30 min
        <div class="spacer"></div>
      </em>
    </div>
    <div class="cell">
      <p>2:45<span>PM</span> Patient Name</p>
      <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 15 min</em>
    </div>
  </div>
  <div class="column">
    <div class="cell">
      <p>2:00<span>PM</span> Bob Jones</p>
      <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 15 min</em>
    </div>
    <div class="cell">
      <p>2:15<span>PM</span> Patient Name</p>
      <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 15 min</em>
    </div>
    <div class="cell">
      <p>2:30<span>PM</span> Patient Name</p>
      <em>Chiropractic Standard <i class="fa fa-clock-o"></i> 30 min
      <div class="spacer"></div>
      </em>
    </div>
  </div>
</div>

CSS

.row {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  padding: 10px;
}
.column {
  -moz-column-width: 50%x;
  -webkit-column-width: 50%;
  column-width: 50%;
}
.cell {
  padding: 10px;
  border-top: 1px solid #777;
}
.cell span {
  font-variant-caps: all-small-caps;
}
.cell em {
  background: #e6e6f8;
  display: block;
  padding: 2px;
}
.cell .spacer {
  height: 30px;
}

The .cell .spacer was included only for appearances…