css+HTML表格高度

Question

如何让表格内的div高度撑满整个td高度，表格内的td高度是可变的，不能设死高度像素

<template>
  <div id="printTable">
    <div class="Table">
      <div class="container">
        <table border="1px" cellspacing="0" class="text-center">
          <thead>
            <tr>
              <th rowspan="2">1</th>
              <th rowspan="2" class="SecondTd">2</th>
              <th rowspan="2">3</th>
              <th rowspan="2">4</th>
              <th rowspan="2">5</th>
              <th rowspan="2">6</th>
              <th rowspan="2">7</th>
              <th rowspan="2">8</th>
              <th rowspan="2" style="min-width:55px">9</th>
              <th rowspan="2" style="min-width:55px">10</th>
              <th rowspan="2">11</th>
              <th rowspan="2">12</th>
              <th rowspan="2">13</th>
              <th rowspan="2">14</th>
              <th rowspan="2">16</th>
              <th rowspan="2">17</th>
              <th rowspan="2">18</th>
              <th rowspan="2">19</th>
              <th colspan="2">20</th>
              <th rowspan="2">21</th>
              <th rowspan="2">22</th>
              <th rowspan="2">24</th>
            </tr>
            <tr>
              <th>12</th>
              <th>12</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in 100" :key="index">
              <td class="firstTd">
                  <table style="width:100%;border-collapse: collapse;border-width:0px; border-style:hidden;"
                  border="1" cellspacing="0" cellpadding="0">
                  <tr style="height:100%">
                   <td>111111</td>
                   <td>222222</td>
                  </tr>
                </table>
              </td>
              <td class="SecondTd">gfdggfdggfdggfdggfdggfdggfdggfdg</td>
              <td>gfhfd</td>
              <td>fsdf</td>
              <td>fsaf</td>
              <td>re</td>
              <td>fsadf</td>
              <td>gsfd</td>
              <td>da</td>
              <td>hhsdh</td>
              <td>fsgda</td>
              <td>hdh</td>
              <td>hfdghfh</td>
              <td>tsadg</td>
              <td>gfdhfgd</td>
              <td>hfghf</td>
              <td>afdgs</td>
              <td>sagsg</td>
              <td colspan="2">
                <div style="display:flex">
                  <div style="width:50%;border-right:1px solid #eee">111</div>
                  <div style="width:50%">111</div>
                </div>
              </td>
              <td>fsadfs</td>
              <td>fdfsf</td>
              <td>fsdafas</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { nextTick, reactive, ref } from "vue";
import print from 'print-js';

export default {
  setup() {
    return {
    };
  },
};
</script>

<style lang="scss" scoped>
.Table {
  width: 100%;
  margin: auto;
  background-color: #fff;
  // height: calc(100vh - 65px);
  height: 300px;

  .container {
    width: 90%;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: scroll;

    table {
      // table-layout: fixed;
      border: none;
      border-collapse: collapse;
      background: white;
      text-align: center;

      thead {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 3;

        tr {
          color: white;

          th {
            background-color: #CCE8EB;
            min-width: 100px;
          }
        }
      }

      tbody {
        tr {
          color: green;

          td {
            min-width: 100px;
            position: -webkit-sticky;
            position: sticky;
            word-break: break-word;
            word-wrap: break-word;
          }
        }
      }

    }
  }

}

.layar{
  border-right: 1px solid #000;
}
.layar:last-child{
  border-right: none;
}
</style>

Answer 1

td有高度的话，可以给div的高度给100%