css用div实现table效果

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

 html代码如下

    

       能量(kcal)
       0.00
    
    

        能量(kcal)
        0.00
     
    

        能量(kcal)
        0.00
     
    

        能量(kcal)
        0.00
     
    

        能量(kcal)
        0.00
     

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)