table表格，thead固定，tbody滚动

_Tough_Girl

已于 2023-06-28 16:30:46 修改

阅读量862

点赞数

分类专栏： CSS 案例文章标签： html css javascript

于 2023-04-04 17:49:52 首次发布

本文链接：https://blog.csdn.net/icemwj/article/details/129958567

版权

CSS 案例专栏收录该内容

5 篇文章 1 订阅

订阅专栏

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