微信小程序制作表格

原创于 2023-01-12 18:09:43 发布 · 935 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

小程序专栏收录该内容

13 篇文章

订阅专栏

这是一个使用Vue.js编写的表格展示示例，包含thead和tbody结构，用于展示具有id,name,test属性的数据列表。表格具有横向滚动功能，且单元格内容保持不换行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

}