手写微信小程序自定义宽度表格

最新推荐文章于 2024-06-17 23:02:11 发布

weirdo_world

最新推荐文章于 2024-06-17 23:02:11 发布

阅读量63

点赞数 3

文章标签：微信小程序小程序

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

版权

    <div class="tb-box">
      <div class="tb-header tb-row">
        <div class="tb-cell">ID</div>
        <div class="tb-cell">名称</div>
        <div class="tb-cell">名称</div>
        <div class="tb-cell">名称</div>
        <div class="tb-cell">名称</div>
      </div>
      <div v-for="(item,index) in tbList" class="tb-row">
        <div class="tb-cell">{{ item.id}}</div>
        <div class="tb-cell">{{ item.name }}</div>
        <div class="tb-cell">{{ item.name }}</div>
        <div class="tb-cell">{{ item.name }}</div>
        <div class="tb-cell">{{ item.name }}</div>
      </div>
    </div>

.tb-box {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;

  .tb-row {
    display: table-row;
    border-bottom: 1px solid #ccc;
    width: 100%;
  }

  .tb-header {
    font-weight: bold;
    background-color: #f0f0f0;
  }

  .tb-cell {
    flex: 1;
    padding: 10px;
    text-align: center;
    display: table-cell;
  }

}