微信小程序制作表格

最新推荐文章于 2025-03-13 14:11:54 发布

weirdo_world

最新推荐文章于 2025-03-13 14:11:54 发布

阅读量920

点赞数

分类专栏：小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weirdo_world/article/details/128664346

版权

小程序专栏收录该内容

13 篇文章

订阅专栏

  <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;
  }

}