Native Table-- add scroll bar when the table exceeds the part

 

I am used to the table of elm, and suddenly I want to write an original table....

Here is the template part, simple and simple, written in tr, td

      <div class="statistics_san">
          <table border="1" cellpadding="0" cellspacing="0" class="table_bei">
            <thead>
              <tr class="hearter">
                <td>公司</td>
                <td>蒸汽量(m³)</td>
                <td>历史平均</td>
                <td>标准</td>
                <td>平均室温(℃)</td>
              </tr>
            </thead>
            <tbody clsss="tBody">
              <tr v-for="(item, index) in zqlList" :key="index">
                <td>{
   
   { item.sub }}</td>
                <td>{
   
   { item.zql }}</td>
                <td>{
   
   { item.lspj }}</td>
                <td>{
   
   { item.bz }}</td>
                <td>{
   
   { item.pjsw }}</td>
              </tr>
            </tbody>
          </table>
        </div>

Fake data written with vue3

let zqlList = ref([
  { sub: "公司2", zql: 378, lspj: 109, bz: 100, pjsw: 22 },
  { sub: "公司3", zql: 233, lspj: 233, bz: 100, pjsw: 22 },
  { sub: "公司4", zql: 345, lspj: 42, bz: 100, pjsw: 24 },
  { sub: "公司5", zql: 123, lspj: 234, bz: 100, pjsw: 26 },
  { sub: "公司6", zql: 234, lspj: 88, bz: 100, pjsw: 27 },
  { sub: "公司7", zql: 234, lspj: 88, bz: 100, pjsw: 27 },
  { sub: "公司8", zql: 234, lspj: 88, bz: 100, pjsw: 27 },
  { sub: "公司9", zql: 234, lspj: 88, bz: 100, pjsw: 27 },
  { sub: "公司10", zql: 234, lspj: 88, bz: 100, pjsw: 27 },
  { sub: "公司11", zql: 234, lspj: 88, bz: 100, pjsw: 27 },
  { sub: "公司12", zql: 234, lspj: 88, bz: 100, pjsw: 27 }
]);

In fact, what I want to express is - if there is a lot of data, I want him to scroll, scroll, scroll....

Here is my css part....

      .statistics_san {
        position: absolute;
        width: 96%;
        height: 30vh;
        top: 68%;

        .table_bei {
          border: 1px solid #246a9c;
          height: 22vh;
          width: 100%;
          text-align: center;
          margin-left: 8px;
          color: #ecedee;
          font-size: 12px;
          margin-top: 32px;
          display: inline-block;
          .table_bei td {
            text-align: center;
          }
          thead {
            width: 100%;
            height: 36px;
            display: inline-block;
            padding-right: 0.5rem;//这个地方是留给右边的滚动条，防止单元格对不齐
           
          }
          tbody {
            width: 100%;
            height: 17vh; 
            overflow-y: auto;
            display: block;
          }
          thead tr {
            height: 100%;
            width: 100%;
            display: table;
            table-layout: fixed;
          }
          tbody tr {
            width: 100%;
            height: 23px;//身体部分每行的高度
            display: table;
            table-layout: fixed;
          }

          .hearter {
            background-color: #042948;
          }
        }
      }