微信小程序制作表格

  <div class="tb-body">
    <div class="tb-head">
      <div class="th">标题一</div>
      <div class="th">标题一</div>
      <div class="th">标题一</div>
      <div class="th">标题一</div>
      <div class="th">标题一</div>
      <div class="th">标题一</div>
      <div class="th">标题一</div>
    </div>
    <div v-for="(item,index) in listData" class="tb-data">
      <div class="td">{
   
   { item.id}}</div>
      <div class="td">{
   
   { item.name}}</div>
      <div class="td">{
   
   { item.test}}</div>
      <div class="td">{
   
   { item.id}}</div>
      <div class="td">{
   
   { item.name}}</div>
      <div class="td">{
   
   { item.test}}</div>
      <div class="td">{
   
   { item.test}}</div>
    </div>
  </div>

.tb-body {
  overflow-x: auto;
  white-space: nowrap;
  word-break: keep-all;

  .tb-head {
    color: #909090;
  }

  .tb-head, .tb-data {
    display: table-row;
    text-align: center;
  }

  .tb-head .th, .tb-data .td {
    display: table-cell;
    padding: 5px 10px;
    border-bottom: 1px solid #EBEBEB;
  }

}