css 设置 table 样式：表头固定，内容垂直方向滚动

一、需求

需要实现下面样式的表格，其中，表头固定、内容垂直方向滚动、鼠标悬停高亮、点击高亮。
基本样式可参考 w3school。

二、实现

<template>
  <div class="alarm">
    <table>
      <thead>
        <th v-for="(item, index) in theadList" :key="index">
          <div class="item">{{ item }}</div>
        </th>
      </thead>
      <tbody>
        <tr
          :class="{ 'active-row': currentIndex == index }"
          v-for="(item, index) in tbodyList"
          :key="index"
          @click="handleRowClick(index)"
        >
          <td>
            <div class="item">{{ item.number }}</div>
          </td>
          <td>
            <div class="item">{{ item.equipment }}</div>
          </td>
          <td>
            <div class="item">{{ item.describe }}</div>
          </td>
          <td>
            <div class="item">{{ item.time }}</div>
          </td>
          <td>
            <div class="item">{{ item.location }}</div>
          </td>
          <td>
            <div
              class="item"
              :class="item.status !== '已处理' ? 'green' : 'red'"
            >
              {{ item.status }}
            </div>
          </td>
        </tr>
      </tbody>
    </table>
</template>

<script>
export default {
  name: "AlarmList",
  data() {
    return {
      currentIndex: -1,
      theadList: [
        "告警编号",
        "告警设备",
        "告警描述",
        "触发时间",
        "触发位置",
        "当前状态"
      ],
      tbodyList: [
        {
          number: 1,
          equipment: "B楼三层配电箱",
          describe: "开关停电",
          time: "2021-06-06",
          location: "B楼3层配电箱",
          status: "已处理"
        },
        {
          number: 2,
          equipment: "B楼三层配电箱",
          describe: "开关停电",
          time: "2021-06-06",
          location: "B楼3层配电箱",
          status: "未处理"
        },
        {
          number: 3,
          equipment: "B楼三层配电箱",
          describe: "开关停电",
          time: "2021-06-06",
          location: "B楼3层配电箱",
          status: "已处理"
        },
        {
          number: 4,
          equipment: "B楼三层配电箱",
          describe: "开关停电",
          time: "2021-06-06",
          location: "B楼3层配电箱",
          status: "已处理"
        },
        {
          number: 5,
          equipment: "B楼三层配电箱",
          describe: "开关停电",
          time: "2021-06-06",
          location: "B楼3层配电箱",
          status: "已处理"
        },
        {
          number: 6,
          equipment: "B楼三层配电箱",
          describe: "开关停电",
          time: "2021-06-06",
          location: "B楼3层配电箱",
          status: "已处理"
        },
        {
          number: 7,
          equipment: "B楼三层配电箱",
          describe: "开关停电",
          time: "2021-06-06",
          location: "B楼3层配电箱",
          status: "已处理"
        },
        {
          number: 8,
          equipment: "B楼三层配电箱",
          describe: "开关停电",
          time: "2021-06-06",
          location: "B楼3层配电箱",
          status: "已处理"
        }
      ]
    };
  },
  methods: {
    closeDialog() {
      this.currentIndex = -1;
    },
    handleRowClick(index) {
      this.currentIndex = index;
    }
  }
};
</script>

<style lang="scss">
.alarm-list {
  border: 0.01rem solid #1b1b1b;
  background: rgba(40, 40, 40, 0.37);
  
  table {
    margin-top: 0.75rem;
  }

  table,
  tbody {
    display: block;
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
    cursor: pointer;
  }

  tbody {
    max-height: 6.5rem;
    overflow-y: scroll;
  }

  table thead,
  tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  table thead {
    height: 1.5625rem;
    border-bottom: 0.01rem solid #fff;
  }

  table thead th {
    width: 20%;
    font-size: 0.75rem;
    font-family: MFDianHei-Regular;
  }

  table tbody td {
    width: 20%;
    height: 2.1rem;
    font-family: MFDianHei-Regular;
    font-size: 0.75rem;
    text-align: center;
  }

  tr:hover {
    background: rgba(150, 144, 144, 0.2);
  }

  .active-row {
    background: rgba(150, 144, 144, 0.2);
  }

  .green,
  .red {
    width: 3rem;
    margin: 0 auto;
    padding: 0.2rem 0;
    border-radius: 0.1rem;
  }

  .green {
    background: #55ff95;
  }

  .red {
    background: #ff0000;
  }
}
</style>