div+css 自定义table

<template>
  <div class="table-container">
    <div class="table">
      <div class="thead table-thead-fix">
        <div class="cell table-cell-fix-left">序号</div>
        <div class="cell">姓名</div>
        <div class="cell">联系方式</div>
        <div class="cell">地址</div>
        <div class="cell">电话</div>
        <div class="cell table-cell-fix-right">时间</div>
      </div>
      <div class="tbody">
        <div class="row" v-for="(v, index) in dataSource" :key="index">
          <div class="cell table-cell-fix-left">{{ index + 1 }}</div>
          <div class="cell">{{ v.name }}</div>
          <div class="cell">{{ v.phone }}</div>
          <div class="cell">{{ v.address }}</div>
          <div class="cell">{{ v.tel }}</div>
          <div class="cell table-cell-fix-right">{{ v.time }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "mTable",

  data() {
    return {
      dataSource: new Array(20).fill({
        index: 1,
        name: "jack",
        phone: "19912345678",
        address: "测试地址",
        tel: "192121",
        time: new Date().toLocaleString(),
      }),
    };
  },

  mounted() {},

  methods: {},
};
</script>

<style lang="less" scoped>
.table-container {
  .table {
    height: 500px;
    overflow: auto;
    background-color: #fff;
    .thead {
      width: 100%;
      display: flex;
      align-items: center;

      &.table-thead-fix {
        position: sticky;
        top: 0;
        z-index: 99;
      }

      .cell {
        padding: 6px 0;
        font-size: 14px;
        color: #000;
        font-weight: bold;
        border-right: 1px solid #f3f3f3;
        border-bottom: 1px solid #f3f3f3;
        background-color: #fff;

        &.table-cell-fix-left {
          position: sticky;
          left: 0;
        }
        &.table-cell-fix-right {
          position: sticky;
          right: 0;
          border-left: 1px solid #f3f3f3;
        }
        &:nth-child(1) {
          flex: 0 0 80px;
        }

        &:nth-child(2) {
          flex: 0 0 100px;
        }

        &:nth-child(3) {
          flex: 0 0 120px;
        }

        &:nth-child(4) {
          flex: 0 0 120px;
        }

        &:nth-child(5) {
          flex: 0 0 900px;
        }

        &:nth-child(6) {
          flex: 0 0 200px;
          border-right: 0;
        }
      }
    }

    .tbody {
      .row {
        display: flex;
        align-items: center;
        .cell {
          padding: 8px 0;
          text-align: center;
          font-size: 12px;
          color: #9f9f9f;
          border-right: 1px solid #f3f3f3;
          border-bottom: 1px solid #f3f3f3;
          background-color: #fff;

          &.table-cell-fix-left {
            position: sticky;
            left: 0;
          }

          &.table-cell-fix-right {
            position: sticky;
            right: 0;
            border-left: 1px solid #f3f3f3;
          }
          &:nth-child(1) {
            flex: 0 0 80px;
          }

          &:nth-child(2) {
            flex: 0 0 100px;
          }

          &:nth-child(3) {
            flex: 0 0 120px;
          }

          &:nth-child(4) {
            flex: 0 0 120px;
          }

          &:nth-child(5) {
            flex: 0 0 900px;
          }

          &:nth-child(6) {
            flex: 0 0 200px;
            border-right: 0;
          }
        }
      }
    }
  }
}
</style>