js前端，一个漂亮的自写表格table

1.写一个简单的table表格框架

 <table>
        <thead class="my-table">
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.address }}</td>
          </tr>
        </tbody>
     </table>

table里的数据在data里返回，以下是实例数据

   tableData: [
          {
            name: "张三",
            age: 30,
            address: "北京市朝阳区"
          },
          {
            name: "李四",
            age: 28,
            address: "上海市浦东新区"
          },
          {
            name: "王五",
            age: 32,
            address: "广州市天河区"
          },
          {
            name: "赵六",
            age: 25,
            address: "深圳市福田区"
          },
          {
            name: "孙七",
            age: 27,
            address: "成都市武侯区"
          },
      ],

这样我们就拥有了一个没有样式的基础表格

2.为了使表格更好看，我实现了如下几步：

1. 固定表头，滚动时保留表格上面的标题

将th的 position设置为sticky，固定首行，也就是top=0，为其设置为一个区分的颜色

  th {
    background-color: #3c7ca7;
    font-weight: bold;
    position: sticky;
    top: 0;
    background-color: rgb(110, 138, 163);
  }

2. 将表格间的分割线去除

<table cellspacing="0"  >
	<--...table内容-->
</table>

3. 修改表格背景颜色，字体等样式
   为了好看点还设置了隔行的颜色区分也就是 tr:nth-child(even)

 th, td {
    padding: 20px;
    text-align: center;
    font-family: '微软雅黑',"times","courier","arial";
    font-weight:"medium";
    //border: 1px solid #ccc;
    font-size: 20px;
    color: #ffffff;
  }
  th {
    background-color: #3c7ca7;
    font-weight: bold;
    position: sticky;
    top: 0;
    background-color: rgb(110, 138, 163);
  }
  tr:nth-child(even) {
    background-color: #3c7ca7;
  }

4. 自动滚动效果
   首先为了滚动效果的顺利实现，给table类增加一个外框类table-container
   增加滑动框并隐藏

.table-container {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; 
  }
  .table-container::-webkit-scrollbar {
  display: none;
}

然后利用timer定时器和scrollTop 属性设置滚动效果，

mounted() {
     this.timerId = setInterval(() => {
      const tableContainer = this.$refs.tableContainer;
      const rowHeight = tableContainer.querySelector('tbody tr').offsetHeight;
      tableContainer.scrollTop += rowHeight;
      if (tableContainer.scrollTop == lasttop) {
        tableContainer.scrollTop = 0;
      }else{
          lasttop=tableContainer.scrollTop
      }
    }, 2000);
    this.init();
  },
   beforeDestroy() {
    // 在组件销毁前清除 setInterval
    clearInterval(this.timerId);

},
由于上面的滚动效果不好，看起来很卡顿，下面优化了滚动效果，加入缓动

  mounted() {
     this.timerId = setInterval(() => {
      const tableContainer = this.$refs.tableContainer;
      const rowHeight = tableContainer.querySelector('tbody tr').offsetHeight;
      tableContainer.scrollTop += rowHeight/30;
      if (tableContainer.scrollTop == lasttop) {
        tableContainer.scrollTop = 0;
      }else{
          lasttop=tableContainer.scrollTop
      }
    }, 30);
    this.init();
   // this.tableroll();
  },

5. 最后实现效果
   

3.全部代码

<div class="table-container" ref="tableContainer">
      <table cellspacing="0"  >
        <thead class="my-table">
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ item.name }}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.address }}</td>
          </tr>
        </tbody>
     </table>
    </div>
   
export default {
  data() {
        tableData: [
          {
            name: "张三",
            age: 30,
            address: "北京市朝阳区"
          },
          {
            name: "李四",
            age: 28,
            address: "上海市浦东新区"
          },
          {
            name: "王五",
            age: 32,
            address: "广州市天河区.dfasfaweorfaiadsfasd"
          },
          {
            name: "赵六",
            age: 25,
            address: "深圳市福田区"
          },
          {
            name: "孙七",
            age: 27,
            address: "成都市武侯区"
          },
      ],
  },
  .table-container::-webkit-scrollbar {
  display: none;
}
.table-container {
    position: absolute;
    left: 80%;
    top:70%;
    height: 300px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; 
    background-color:rgba(18, 76, 117, 0.7);
    .my-table {
  }
  th, td {
    padding: 20px;
    text-align: center;
    font-family: '微软雅黑',"times","courier","arial";
    font-weight:"medium";
    //border: 1px solid #ccc;
    font-size: 20px;
    color: #ffffff;
  }
  th {
    background-color: #3c7ca7;
    font-weight: bold;
    position: sticky;
    top: 0;
    background-color: rgb(110, 138, 163);
  }
  tr:nth-child(even) {
    background-color: #3c7ca7;
  }
}