table-like-grid

table-like-grid.css

.table-like-grid {
  display: table;
  width: 100%;
}

.table-like-grid > li {
  display: table-row;
}

.table-like-grid > li[data-role="table-header"] {
  display: table-header-group;
}

.table-like-grid > li > div {
  display: table-cell;
  border-bottom: 1px solid #eaf1ff;
  padding: 15px 0;
}

.table-like-grid > li[data-role="table-header"] > div {
  padding: 0;
  border-width: 2px;
  font-size: 14px;
  color: #98a9cb;
}

/* fixed width */
.w100 {
  width: 100px;
}

table-like-grid.html

<ul class="table-like-grid" >
  <li data-role="table-header">
    <div class="w100"><h5>name</h5></div>
    <div><h5>phone</h5></div>
    <div><h5>birthday</h5></div>
    <div><h5>address</h5></div>
    <div><h5>time</h5></div>
    <div><h5>card number</h5></div>
    <div><h5>balance</h5></div>
    <div><h5>points</h5></div>
    <div><h5>operate</h5></div>
  </li>
  <li>
    <div>Allenice</div>
    <div>15011xxx31xx</div>
    <div>2014-12-12</div>
    <div>xxxxxx</div>
    <div>2014-10-10</div>
    <div>100001</div>
    <div>$1000</div>
    <div>>100</div>
    <div>
      <a class="btn" href="javascript:void(0);">operate</a>
      <a class="btn m-l-10" href="http://blog.allenice233.com">record</a>
    </div>
  </li>
</ul>

display: table 时加上 table-layout:fixed; 更好。