css用div实现table效果_css div table

最近项目需要实现类似table样式，使用div实现了如上图的效果：

 html代码如下

<div class="table-wrapper">
    <div class="table-item">
       <span class="table-title">能量(kcal)</span>
       <span class="table-content">0.00</span>
    </div>
    <div class="table-item">
        <span class="table-title">能量(kcal)</span>
        <span class="table-content">0.00</span>
     </div>
    <div class="table-item">
        <span class="table-title">能量(kcal)</span>
        <span class="table-content">0.00</span>
     </div>
    <div class="table-item">
        <span class="table-title">能量(kcal)</span>
        <span class="table-content">0.00</span>
     </div>
    <div class="table-item">
        <span class="table-title">能量(kcal)</span>
        <span class="table-content">0.00</span>
     </div>
</div>

css代码

.table-wrapper 
      width: 1668px
      border-right: 1px solid rgba(0,0,0,0.10)
      border-top: 1px solid rgba(0,0,0,0.10)
      overflow: hidden
      display: table
      border-radius: 8px
      margin: 8px 0 40px
      box-shadow: inset 1px 1px 0 0 rgba(0,0,0,0.10), inset 0 -1px 0 0 rgba(0,0,0,0.10)
      text-align: left
      .table-item
        display: inline-table
        margin-top: -1px
        /*margin: -1px 0 -1px -1px*/
        .table-title
          box-sizing: border-box
          display: table-cell
          padding: 16px 0 15px 24px
          width: 278px
          height: 100%
          font-size: 24px
          line-height: 33px
          color: rgba(44,49,68,0.60)
          background: #EAEBED
          box-shadow: inset 1px 1px 0 0 rgba(0,0,0,0.10), inset 0 -1px 0 0 rgba(0,0,0,0.10)
        .table-content
          box-sizing: border-box
          display: table-cell
          padding: 16px 0 15px 24px
          font-size: 24px
          line-height: 33px
          color: rgba(44,49,68,0.60)
          width: 278px
          height: 100%
          background: #fff
          box-shadow: inset 1px 1px 0 0 rgba(0,0,0,0.10), inset 0 -1px 0 0 rgba(0,0,0,0.10)