Vue实现table表格数据自动滚动、无缝滚动、CSS实现table固定表头和首列

_Tough_Girl

已于 2024-09-30 11:05:49 修改

阅读量2k

点赞数 2

分类专栏： web前端文章标签：前端

于 2023-03-30 09:25:16 首次发布

本文链接：https://blog.youkuaiyun.com/icemwj/article/details/129850446

版权

web前端专栏收录该内容

27 篇文章

订阅专栏

1、 Vue实现table表格数据自动滚动

（1）利用 transform 里的 translate 实现滚动

效果图如下：
在这里插入图片描述

在这里插入图片描述
代码：

<template>
  <div class="listDiv">
    <div class="tableDiv">
      <div class="tHeaderContainer">
        <table class="tHeader">
          <thead>
            <tr ref="tr">
              <th>序号</th>
              <th>负责人</th>
              <th>任务</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="scrollContainer" ref="scrollContainer" @mouseenter="stopScroll" @mouseleave="autoScroll">
        <table class="tTable" ref="table">
          <tbody ref="tBody">
            <tr v-for="(item) in tableData" :key="item.id" @click="trOnclick(item)">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.task }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '负责人1', task: '任务1' },
        { id: 2, name: '负责人2', task: '任务2' },
        { id: 3, name: '负责人3', task: '任务3' },
        { id: 4, name: '负责人4', task: '任务4' },
        { id: 5, name: '负责人5', task: '任务5' },
        { id: 6, name: '负责人6', task: '任务6' },
        { id: 7, name: '负责人7', task: '任务7' },
        { id: 8, name: '负责人8', task: '任务8' },
        { id: 9, name: '负责人9', task: '任务9' },
        { id: 10, name: '负责人10', task: '任务10' },
      ],
      scrollTimer: null,
      translateY: 0,
      step: 3,
    }
  },
  mounted() {
    if (this.scrollTimer) {
      clearInterval(this.scrollTimer);
      this.scrollTimer = null;
    }
    this.autoScroll();

  },
  destroyed() {
    if (this.scrollTimer) {
      clearInterval(this.scrollTimer);
      this.scrollTimer = null;
    }
  },
  methods: {
    // 自动滚动
    autoScroll() {
      let that = this;
      const table = this.$refs.table;
      const tBody = this.$refs.tBody;

      // table.appendChild(tBody.cloneNode(true));
      // console.log(table);

      let tBodyHeight = this.$refs.tBody.scrollHeight;
      let scrollContainerHeight = this.$refs.scrollContainer.offsetHeight;
      // console.log(tBodyHeight, 's-h');
      // console.log(scrollContainerHeight, 'c-h');

      function scroll() {
        that.translateY = that.translateY - that.step;
        tBody.style.transform = 'translateY(' + that.translateY + 'px)';
        // tBody.style.transition = "all 200ms ease-in 0s";
        if (Math.abs(that.translateY) >= tBodyHeight) {
          that.translateY = 0;
          // tBody.style.transition = "all 0ms ease-in 0s";
        }
      }

      if (tBodyHeight > scrollContainerHeight) {
        this.scrollTimer = setInterval(scroll, 200);
      } else {
        this.stopScroll();
      }
    },
    // 暂停滚动
    stopScroll() {
      if (this.scrollTimer) {
        clearInterval(this.scrollTimer);
        this.scrollTimer = null;
      }
    },
    // 鼠标点击当前行
    trOnclick(item) {
      console.log(item);
    },
  },
}
</script>

<style lang="scss" scoped>
.listDiv {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #efefef;
}

.tableDiv {
  background-color: #fff;
  width: 260px;
  height: 300px;
}

.tHeaderContainer {
  position: relative;
  height: 30px;
  line-height: 30px;
  width: 100%;
  background-color: #86a0e9;
  .tHeader {
    border-collapse: collapse;
    width: 100%;

    tr {
      th {
        font-size: 16px;
        width: 33%;
      }
    }
  }
}

.scrollContainer {
  position: relative;
  width: 100%;
  height: calc(100% - 30px);
  overflow: hidden;

  .tTable {
    width: 100%;
    border-collapse: collapse;

    tbody {
      transition: all 200ms ease-in 0s;
      transform: translate(0px, 0px);
    }

    tr {
      height: 32px;
      line-height: 32px;

      td {
        width: 33%;
      }
    }

    tr:hover {
      background-color: #9dafe2;
    }
  }
}
</style>

（2）通过动态改变表格数据实现滚动

效果如下：

在这里插入图片描述

在这里插入图片描述
代码：

<template>
  <div class="listDiv">
    <div class="tableDiv">
      <div class="tHeaderContainer">
        <table class="tHeader">
          <thead>
            <tr ref="tr">
              <th>序号</th>
              <th>负责人</th>
              <th>任务</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="scrollContainer" ref="scrollContainer" @mouseenter="stopScroll" @mouseleave="autoScroll">
        <table class="tTable" ref="table">
          <tbody ref="tBody">
            <tr v-for="(item) in tableData" :key="item.id" @click="trOnclick(item)">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.task }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '负责人1', task: '任务1' },
        { id: 2, name: '负责人2', task: '任务2' },
        { id: 3, name: '负责人3', task: '任务3' },
        { id: 4, name: '负责人4', task: '任务4' },
        { id: 5, name: '负责人5', task: '任务5' },
        { id: 6, name: '负责人6', task: '任务6' },
        { id: 7, name: '负责人7', task: '任务7' },
        { id: 8, name: '负责人8', task: '任务8' },
        { id: 9, name: '负责人9', task: '任务9' },
        { id: 10, name: '负责人10', task: '任务10' },
      ],
      tableDataTwo: [],
      scrollTimer: null,
    }
  },
  mounted() {
    if (this.scrollTimer) {
      clearInterval(this.scrollTimer);
      this.scrollTimer = null;
    }
    this.autoScroll();

  },
  destroyed() {
    if (this.scrollTimer) {
      clearInterval(this.scrollTimer);
      this.scrollTimer = null;
    }
  },
  methods: {
    // 自动滚动
    autoScroll() {
      let that = this;
      
      this.tableDataTwo = [...this.tableData];

      let tBodyHeight = this.$refs.tBody.scrollHeight;
      let scrollContainerHeight = this.$refs.scrollContainer.offsetHeight;
      // console.log(tBodyHeight, 's-h');
      // console.log(scrollContainerHeight, 'c-h');

      function scroll() {
        let temp = that.tableData.shift();
        that.tableData.push(temp);
      }

      if (tBodyHeight > scrollContainerHeight) {
        this.scrollTimer = setInterval(scroll, 1000);
      } else {
        this.stopScroll();
      }
    },
    // 暂停滚动
    stopScroll() {
      if (this.scrollTimer) {
        clearInterval(this.scrollTimer);
        this.scrollTimer = null;
      }
    },
    // 鼠标点击当前行
    trOnclick(item) {
      console.log(item);
    },
  },
}
</script>

<style lang="scss" scoped>
.listDiv {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #efefef;
}

.tableDiv {
  background-color: #fff;
  width: 260px;
  height: 300px;
}

.tHeaderContainer {
  position: relative;
  height: 30px;
  line-height: 30px;
  width: 100%;
  background-color: #86a0e9;
  .tHeader {
    border-collapse: collapse;
    width: 100%;

    tr {
      th {
        font-size: 16px;
        width: 33%;
      }
    }
  }
}

.scrollContainer {
  position: relative;
  width: 100%;
  height: calc(100% - 30px);
  overflow: hidden;

  .tTable {
    width: 100%;
    border-collapse: collapse;

    tr {
      height: 32px;
      line-height: 32px;

      td {
        width: 33%;
      }
    }

    tr:hover {
      background-color: #9dafe2;
    }
  }
}
</style>

（3）vue简单实现数据无缝滚动

参考： vue简单实现无缝滚动

在这里插入图片描述

在这里插入图片描述
实现思路：

在这里插入图片描述
在vue中如何复制一份列表出来且不能丢失绑定的事件，很简单使用slot插槽，使用两个插槽我们就拥有了两个列表。

ListScroll.vue

<template>
  <div class="listScroll" ref="listScrollBox">
    <!-- 在vue中如何复制一份列表出来且不能丢失绑定的事件，很简单使用slot插槽，使用两个插槽我们就拥有了两个列表 -->
    <slot></slot>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "listScroll",
  props: {
    speed: {
      default: 1,
      type: Number,
    },
  },
  data() {
    return {
      height: 0,
      isScroll: true,
    };
  },
  computed: {
    // 第一个slot
    ele0() {
      return this.$refs.listScrollBox.children[0];
    },
    // 第二个slot
    ele1() {
      return this.$refs.listScrollBox.children[1];
    },
    // 盒子的可视高度
    boxHeight() {
      return this.$refs.listScrollBox.clientHeight;
    },
  },
  created() {},
  mounted() {
    //在盒子内容高度大于可视高度时滚动
    if (this.ele0.clientHeight > this.boxHeight) {
      this.startScroll(this.height);
      this.setEvet();
    } else {
      this.isScroll = false;
    }

    console.log(
      this.$refs.listScrollBox.children,
      "======",
      this.boxHeight,
      this.ele0.clientHeight
    );
  },
  methods: {
    //鼠标移入停止滚动 移出继续滚动
    setEvet() {
      this.$refs.listScrollBox.onmouseenter = () => {
        this.isScroll = false;
        // this.height = 0;
      };
      this.$refs.listScrollBox.onmouseleave = () => {
        this.isScroll = true;
        this.$nextTick(() => {
          this.startScroll(this.height);
        });
      };
    },
    // 滚动方法
    startScroll(height) {
      this.ele0.style = `transform: translateY(-${height}px);`;
      this.ele1.style = `height: ${this.boxHeight}px; transform: translateY(-${height}px); overflow: hidden;`;
      if (height >= this.ele0.clientHeight) {
        this.height = 0;
      } else {
        this.height += this.speed;
      }
      if (!this.isScroll) return;
      window.requestAnimationFrame(() => {
        this.startScroll(this.height);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.listScroll {
  overflow: hidden;
}
.hover {
  overflow-y: auto;
}
.hide {
  display: none;
}
</style>

TableScroll.vue 中使用：

<template>
  <div class="scroll_container">
    <table class="tHeader">
      <tr>
        <th v-for="(item, index) in theadArr" :key="index" style="width: 33%">
          {{ item.label }}
        </th>
      </tr>
    </table>
    <list-scroll class="box" :speed="0.5">
      <table class="tBody">
        <tr v-for="item in tableData" :key="item.id">
          <td style="width: 33%" v-for="item2 in theadArr" :key="item2.value">
            {{ item[item2.value] }}
          </td>
        </tr>
      </table>
    </list-scroll>
  </div>
</template>

<script>
import ListScroll from "./ListScroll/index.vue";

export default {
  name: "tableScroll",
  components: { ListScroll },
  data() {
    return {
      theadArr: [
        { value: "id", label: "id" },
        { value: "name", label: "姓名" },
        { value: "task", label: "任务" },
      ],
      tableData: [
        { id: 1, name: "负责人1", task: "任务1" },
        { id: 2, name: "负责人2", task: "任务2" },
        { id: 3, name: "负责人3", task: "任务3" },
        { id: 4, name: "负责人4", task: "任务4" },
        { id: 5, name: "负责人5", task: "任务5" },
        { id: 6, name: "负责人6", task: "任务6" },
        { id: 7, name: "负责人7", task: "任务7" },
        { id: 8, name: "负责人8", task: "任务8" },
        { id: 9, name: "负责人9", task: "任务9" },
        { id: 10, name: "负责人10", task: "任务10" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.scroll_container {
  position: relative;
  width: 100%;
  // height: calc(100% - 90px);

  .tHeader {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; // 表格宽度不随文字增多而变长
    background-color: #86a0e9;

    tr {
      width: 100%;
      height: 30px;
      line-height: 30px;

      th {
        text-align: center;
      }
    }
  }

  .box {
    height: 300px;
    width: 100%;
    // height: calc(100% - 30px);
  }

  .tBody {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; // 表格宽度不随文字增多而变长

    tr {
      width: 100%;
      height: 30px;
      line-height: 30px;

      &:hover {
        background-color: #9dafe2;
      }

      td {
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>

2、使用DIV + CSS + grid布局实现table固定表头和首列

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tabel表格固定表头和首列</title>

  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      width: 100%;
    }

    .flex {
      display: flex;
    }

    .flex-center {
      justify-content: center;
      align-items: center;
    }

    .justify-center {
      justify-content: center;
    }

    .align-center {
      align-items: center;
    }

    .table_box {
      margin: 20px auto;
      width: 500px;
      height: 200px;
      box-sizing: border-box;
      position: relative;
      z-index: 999;
      border: 1px solid #e4e4e4;
      overflow: auto;
    }

    .table_header {
      position: sticky;
      top: 0;
      z-index: 999;
      color: #333;
      background: #f4f6ff;
      /* display: grid; 网格布局 */
      /* grid-auto-flow 属性控制自动放置的项目如何插入网格中 */
      /* column	通过填充每一列来放置项目 */
      display: grid;
      grid-auto-flow: column;
    }

    .table_header_th {
      position: relative;
      z-index: 888;
      width: 110px;
      height: 35px;
      background: #f4f6ff;
      box-sizing: border-box;
      border: 1px solid #e4e4e4;
      border-left: 0;
      border-top: 0;
    }

    .table_header_th:nth-child(1) {
      width: 120px;
      position: sticky;
      left: 0;
      z-index: 999;
    }

    .table_body {
      background-color: #fff;
    }

    .table_tr {
      display: grid;
      grid-auto-flow: column;
      position: relative;
    }

    .table_td {
      width: 110px;
      height: 35px;
      /* background: #f4f6ff; */
      background: #fff;
      box-sizing: border-box;
      border: 1px solid #e4e4e4;
      border-left: 0;
      border-top: 0;
    }

    .table_td:nth-child(1) {
      width: 120px;
      position: sticky;
      left: 0;
    }

    /* 美化滚动条 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      width: 6px;
      background: rgba(#101F1C, 0.1);
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
    }

    ::-webkit-scrollbar-thumb {
      background-color: rgba(144, 147, 153, .5);
      /* background-clip: padding-box; */
      /* min-height: 28px; */
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
      transition: background-color .3s;
      cursor: pointer;
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: rgba(144, 147, 153, .3);
    }
  </style>
</head>

<body>
  <div class="table_box">
    <div class="table_header flex align-center ">
      <div class="table_header_th flex flex-center">序号</div>
      <div class="table_header_th flex flex-center">姓名</div>
      <div class="table_header_th flex flex-center">姓名</div>
      <div class="table_header_th flex flex-center">姓名</div>
      <div class="table_header_th flex flex-center">姓名</div>
    </div>
    <div class="table_body">
      <div class="table_tr">
        <div class="table_td flex flex-center">1</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
      </div>
      <div class="table_tr">
        <div class="table_td flex flex-center">1</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
      </div>
      <div class="table_tr">
        <div class="table_td flex flex-center">1</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
      </div>
      <div class="table_tr">
        <div class="table_td flex flex-center">1</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
      </div>
      <div class="table_tr">
        <div class="table_td flex flex-center">1</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
      </div>
      <div class="table_tr">
        <div class="table_td flex flex-center">1</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
      </div>
      <div class="table_tr">
        <div class="table_td flex flex-center">1</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
        <div class="table_td flex flex-center">张三</div>
      </div>

    </div>
  </div>
</body>

</html>

3、实现table固定表头

用Vue.js实现element-ui表格实现自动滚动

table表格，thead固定，tbody滚动

效果图：
在这里插入图片描述

      <table cellspacing="0">
        <thead>
          <tr>
            <th>排名</th>
            <th>城市</th>
            <th>今年上报数</th>
            <th>去年上报数</th>
            <th>差值</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.rank }}</td>
            <td>{{ item.city }}</td>
            <td>{{ item.number }}</td>
            <td>{{ item.lastNumber }}</td>
            <td>{{ item.difference }}</td>
          </tr>
        </tbody>
      </table>

      tableData: [
        { rank: 1, city: '宜昌市', number: 71, lastNumber: 15, difference: 56 },
        { rank: 2, city: '黄冈市', number: 70, lastNumber: 8, difference: 62 },
        { rank: 3, city: '襄阳市', number: 67, lastNumber: 11, difference: 56 },
        { rank: 4, city: '孝感市', number: 59, lastNumber: 6, difference: 53 },
        { rank: 5, city: '恩施州', number: 53, lastNumber: 18, difference: 35 },
        { rank: 6, city: '荆州市', number: 52, lastNumber: 10, difference: 42 },
        { rank: 7, city: '十堰市', number: 51, lastNumber: 38, difference: 13 },
        { rank: 8, city: '咸宁市', number: 42, lastNumber: 27, difference: 15 },
        { rank: 9, city: '黄石市', number: 32, lastNumber: 22, difference: 10 },
        { rank: 10, city: '武汉市', number: 30, lastNumber: 12, difference: 18 },
        { rank: 11, city: '荆门市', number: 29, lastNumber: 9, difference: 20 },
        { rank: 12, city: '随州市', number: 22, lastNumber: 7, difference: 15 },
        { rank: 13, city: '鄂州市', number: 9, lastNumber: 7, difference: 2 },
        { rank: 14, city: '仙桃市', number: 7, lastNumber: 4, difference: 3 },
        { rank: 15, city: '潜江市', number: 7, lastNumber: 4, difference: 3 },
        { rank: 16, city: '天门市', number: 7, lastNumber: 4, difference: 3 },
      ]

    table {
      width: 100%;
      height: 600px;
      font-size: 14px;
      text-align: center;
      /*设置相邻单元格的边框间的距离*/
      border-spacing: 0;
      /*表格设置合并边框模型*/
      border-collapse: collapse;

      thead {
        display: table;
        width: calc(100% - 6px);
        height: 40px;
        color: #03e6f4;
        font-weight: 400;
        table-layout: fixed; // 表格固定

        th {
          border: 1px solid #fff;
        }
      }

      tbody {
        display: block;
        height: calc(100% - 40px);
        width: calc(100% - 6px);
        color: #fff;
        overflow-y: auto;

        tr {
          display: table;
          width: 100%;
          table-layout: fixed;
          height: 40px;

          td {
            border: 1px solid #fff;
            // overflow: hidden;
            // white-space: nowrap;
            // text-overflow: ellipsis;
          }
        }

        tr:hover {
          background-color: #08a850;
        }
      }
    }

/* 滚动条宽度 */
::-webkit-scrollbar {
  width: 5px;
  background-color: transparent;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  // border-radius: 5px;
  // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #fff;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // border-radius: 5px;
  background: #8b8989;
}

滚动条样式设置

【CSS】关于滚动条样式

4、使用DIV+纯CSS实现固定表头和首列和尾列

参考：使用DIV+纯CSS实现可固定表头和固定列的Table表格效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    .table-container {
      width: 800px;
    }

    .table {
      width: 100%;
      height: 300px;
      overflow: auto;
      background-color: #fff;
    }

    .thead {
      display: flex;
      align-items: center;
      width: 100%;
    }

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

    .thead .cell {
      padding: 6px 0;
      font-size: 14px;
      color: #000;
      font-weight: bold;
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      background-color: #f0f0f0;
      text-align: center;
    }

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

    .table-cell-fix-right {
      position: sticky;
      right: 0;
      border-left: 1px solid #ddd;
    }

    .thead .cell:nth-child(1) {
      flex: 0 0 80px;
    }

    .thead .cell:nth-child(2) {
      flex: 0 0 100px;
    }

    .thead .cell:nth-child(3) {
      flex: 0 0 120px;
    }

    .thead .cell:nth-child(4) {
      flex: 0 0 500px;
    }

    .thead .cell:nth-child(5) {
      flex: 0 0 100px;
    }

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


    .tbody .row {
      display: flex;
      align-items: center;
    }

    .tbody .row .cell {
      padding: 8px 0;
      text-align: center;
      font-size: 12px;
      /* color: #9F9F9F; */
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      background-color: #fff;
    }

    .tbody .row .cell:nth-child(1) {
      flex: 0 0 80px;
    }

    .tbody .row .cell:nth-child(2) {
      flex: 0 0 100px;
    }

    .tbody .row .cell:nth-child(3) {
      flex: 0 0 120px;
    }

    .tbody .row .cell:nth-child(4) {
      flex: 0 0 500px;
    }

    .tbody .row .cell:nth-child(5) {
      flex: 0 0 100px;
    }

    .tbody .row .cell:nth-child(6) {
      flex: 0 0 200px;
      border-right: 0;
    }

    /* 滚动条宽度 */
    ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
      background-color: #8b8989;
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
      /* border-radius: 5px; */
      /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
      background: #8b8989;
    }

    /* 滚动条轨道 */
    ::-webkit-scrollbar-track {
      /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
      /* border-radius: 5px; */
      background: #d2d2d2;
    }
  </style>
</head>

<body>
  <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">
          <div class="cell table-cell-fix-left">1</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">2</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">3</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">4</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">5</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">6</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">7</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">8</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">9</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>
        <div class="row">
          <div class="cell table-cell-fix-left">10</div>
          <div class="cell">张三</div>
          <div class="cell">130****1982</div>
          <div class="cell">四川省成都市**区**街道**小区**栋</div>
          <div class="cell">028-10830869</div>
          <div class="cell table-cell-fix-right">2024-06-26</div>
        </div>

      </div>
    </div>
  </div>

</body>

</html>

table.scss:

.table-container {
  width: 800px;

  .table {
    width: 100%;
    height: 300px;
    overflow: auto;
    background-color: #fff;

    .thead {
      display: flex;
      align-items: center;
      width: 100%;

      .cell {
        padding: 6px 0;
        font-size: 14px;
        color: #000;
        font-weight: bold;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        background-color: #f0f0f0;
        text-align: center;
      }
    }

    .cell:nth-child(1) {
      flex: 0 0 80px;
    }

    .cell:not(:first-child) {
      flex: 0 0 100px;
    }

    .cell:last-child {
      flex: 0 0 200px;
      border-right: 0;
    }

    .table-thead-fixed {
      position: sticky;
      top: 0;
      z-index: 999;
    }

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

    .table-cell-fixed-right {
      position: sticky;
      right: 0;
      border-left: 1px solid #ddd;
    }

    .tbody {
      .row {
        display: flex;
        align-items: center;

        .cell {
          padding: 8px 0;
          text-align: center;
          font-size: 12px;
          /* color: #9F9F9F; */
          border-right: 1px solid #ddd;
          border-bottom: 1px solid #ddd;
          background-color: #fff;
        }
      }
    }
  }
}

5、ionic3中实现table固定表头和首列（3）

在这里插入图片描述

<ion-content>
  <ion-scroll class="table_scroll" scrollX="true" scrollY="true">
    <table cellspacing="0">
      <thead>
        <tr>
          <th>断面名称</th>
          <th>所属河流</th>
          <th>监测时间</th>
          <th *ngFor="let element of headerList">{{element.name}}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of dataList">
          <td>{{ item.siteName }}</td>
          <td>{{ item.riverName }}</td>
          <td>{{ item.dataTime }}</td>
          <td *ngFor="let element of headerList">{{item[element.value]}}</td>
        </tr>
      </tbody>
    </table>

  </ion-scroll>
</ion-content>

  tableHeaders: Array<any> = [
    // {
    //   name: '断面名称',
    //   value: 'siteName'
    // },
    // {
    //   name: '所属河流',
    //   value: 'riverName'
    // },
    // {
    //   name: '监测时间',
    //   value: 'dataTime'
    // },
    {
      name: '达标情况',
      value: 'waterLevelStr',
      checked: true,
    },
    {
      name: '超标项目(类别)倍数',
      value: 'cbs',
      checked: true,
    },
    {
      name: '铊(μg/L)',
      value: '铊',
      checked: true,
    },
    {
      name: '水温(℃)',
      value: '水温',
      checked: true,
    },
    {
      name: 'pH(无量纲)',
      value: 'pH',
      checked: true,
    },
    {
      name: '溶解氧(mg/L)',
      value: '溶解氧',
      checked: true,
    },
    {
      name: '电导率(ms/m)',
      value: '电导率',
      checked: true,
    },
    {
      name: '浑浊度(NTU)',
      value: '浑浊度',
      checked: true,
    },
    {
      name: '高猛酸盐指数(mg/L)',
      value: '高锰酸盐指数',
      checked: true,
    },
    {
      name: '氨氮(mg/L)',
      value: '氨氮（NH3-N）',
      checked: true,
    },
    {
      name: '总磷(mg/L)',
      value: '总磷（以P 计）',
      checked: true,
    },
    {
      name: '总氮(mg/L)',
      value: '总氮（以N 计）',
      checked: true,
    },
  ];
  headerList: Array<any> = [];

page-water-real-detail {
  .table_scroll {
    width: 100%;
    height: 100%;
  }

  table {
    width: 100%;
    text-align: center;
    /*设置相邻单元格的边框间的距离*/
    border-spacing: 0;
    /*表格设置合并边框模型*/
    border-collapse: collapse;
    // overflow: auto;
    color: #999;
    box-sizing: border-box;

    thead {
      display: table;
      width: 100%;
      height: 2.5rem;
      font-weight: 400;
      font-size: 1.3rem;
      table-layout: fixed; // 表格固定
      position: sticky;
      top: 0;
      z-index: 999;

      th {
        box-sizing: border-box;
        border: 1px solid #cdd;
        border-left: 0;
        border-top: 0;
        width: 10rem;
        white-space: nowrap;
        overflow: auto;
        background-color: #effcff;
        font-weight: 400;
      }

      th:nth-child(1) {
        width: 12rem;
        position: sticky;
        left: 0;
        z-index: 999;
      }
    }

    tbody {
      display: block;
      width: 100%;
      height: 100%;
      font-size: 1.2rem;

      tr {
        display: table;
        width: 100%;
        table-layout: fixed;
        height: 2.5rem;

        td {
          width: 10rem;
          box-sizing: border-box;
          border: 1px solid #cdd;
          border-left: 0;
          border-top: 0;
          overflow: auto;
          white-space: nowrap;
          // text-overflow: ellipsis;
        }

        td:nth-child(1) {
          width: 12rem;
          position: sticky;
          left: 0;
        }

      }

      tr:nth-child(odd) {
        td {
          background-color: #f6f9ff;
        }
      }

      tr:nth-child(even) {
        td {
          background-color: #fff;
        }
      }

    }
  }

}