如何实现min-height为90vh且单元格高度不超30px的表格？

• 表格需设置min-height: 90vh，保证高度不低于该值
• 所有<th>和<td>单元格高度不得超过30px，避免随表格高度被拉长
• 表格底部添加页脚，页脚固定在表格底部，单元格顶部对齐，且单元格区域与页脚之间留有空白

当给表格设置min-height后，表格会自动把额外高度分配到所有行（<tr>）上，进而拉伸单元格。CSS里给<th>/<td>设置的height: 30px本质是最小高度，而非固定高度——表格会优先满足自身的min-height要求，把多余空间分摊到行和单元格，导致单元格被拉长。

1. 调整HTML结构 #

拆分表格的表头、数据区和页脚，用<thead>、<tbody>、<tfoot>分别承载，确保结构清晰：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>
<body>
  <div class="mainDiv">
    <table>
      <thead>
        <tr>
          <th>Sr no</th>
          <th>Date</th>
          <th class="subject-column">Subject</th>
          <th class="marks-column">Marks</th>
        </tr>
      </thead>
      <tbody class="table-body">
        <tr>
          <td>1.</td>
          <td>26-8-24</td>
          <td>Maths</td>
          <td>B2 ( 60-70 Percentage )</td>
        </tr>
        <tr>
          <td>1.</td>
          <td>26-8-24</td>
          <td>Maths</td>
          <td>B2 ( 60-70 Percentage )</td>
        </tr>
        <tr>
          <td>1.</td>
          <td>26-8-24</td>
          <td>Maths</td>
          <td>B2 ( 60-70 Percentage )</td>
        </tr>
        <tr>
          <td>1.</td>
          <td>26-8-24</td>
          <td>Maths</td>
          <td>B2 ( 60-70 Percentage )</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3" style="text-align: right; padding-right: 10px;">Total</td>
          <td>B2</td>
        </tr>
      </tfoot>
    </table>
  </div>
</body>
</html>

2. 修改CSS样式 #

通过Flex布局让<tbody>自动填充表格剩余空间，同时限制单元格最大高度，固定表头和页脚位置：

body,
html {
  background-color: white;
  margin: 0;
  padding: 0;
  height: 100%;
}

.mainDiv {
  display: flex;
  justify-content: center;
  padding-top: 1rem;
}

table {
  width: 80%;
  min-height: 90vh;
  border-collapse: collapse;
  table-layout: fixed;
  display: flex;
  flex-direction: column;
}

thead, tfoot {
  flex-shrink: 0; /* 表头和页脚不被压缩 */
}

.table-body {
  flex-grow: 1; /* 自动填充表格剩余空间 */
  display: block;
  overflow-y: auto; /* 内容过多时可滚动，可选 */
}

.table-body tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

th,
td {
  border: 1px solid black;
  text-align: center;
  height: 30px;
  max-height: 30px; /* 强制限制单元格最大高度 */
  font-size: 14px;
  line-height: 30px;
  overflow: hidden; /* 超出内容隐藏，可选 */
}

th {
  background-color: #f2f2f2;
}

.subject-column {
  width: 50%;
}

.marks-column {
  width: 30%;
}

效果说明 #

• 表格始终保持min-height:90vh的最低高度
• 所有单元格高度固定为30px，不会被表格多余空间拉长
• 页脚固定在表格底部，<tbody>区域自动填充表头与页脚间的空白，内容过多时可滚动
• 单元格与页脚之间的空白由<tbody>的自动填充实现

内容的提问来源于stack exchange，提问作者Meet