HTML表格行高设置失效：指定行高被忽略，两行均分高度

我尝试做一个铺满整个页面的表格，想要首行占10%高度、第二行占90%，但实际两行各占了50%，给首行设置的10px高度完全没生效。

现有代码 #

CSS #

body {
  padding: 0;
  margin: 0;
  background-image: none;
}

.tableFull {
  table-layout: auto;
  width: 100vw;
  height: 100vh;
}

.mainRow1 {
  background-color: #7DD2CD;
  height: 10px;
}

.mainRow2 {
  background-color: gray;
}

HTML #

<table class="tableFull">
  <tr>
    <td class="mainRow1">
    </td>
  </tr>
  <tr>
    <td class="mainRow2">
      test
    </td>
  </tr>
</table>

问题出在哪 #

1. table-layout: auto的自动布局逻辑：这个属性会让浏览器根据单元格内容自动计算布局。当表格设了100vh的固定高度，第一行单元格是空的，浏览器就会自动均分高度来填满整个表格，直接忽略你设置的10px行高。
2. 固定像素不适合比例分配：你用的10px是固定值，而表格总高度是随视口变化的，浏览器不会把这个固定像素当成比例分配的依据，反而会拉伸行高来填满表格。

解决办法 #

要实现10%-90%的高度比例，改两个地方就行：

1. 切换表格布局模式 #

把tableFull的table-layout改成fixed，让表格严格遵循你设置的尺寸规则，不再依赖内容自动调整：

.tableFull {
  table-layout: fixed; /* 替换原来的auto */
  width: 100vw;
  height: 100vh;
  border-collapse: collapse; /* 可选，消除表格默认的边框间距 */
}

2. 用百分比设置行高 #

把行高从固定像素改成百分比，明确分配比例：

.mainRow1 {
  background-color: #7DD2CD;
  height: 10%; /* 替换10px */
}

.mainRow2 {
  background-color: gray;
  height: 90%; /* 新增90%高度设置 */
}

完整修改后的代码 #

CSS

body {
  padding: 0;
  margin: 0;
  background-image: none;
}

.tableFull {
  table-layout: fixed;
  width: 100vw;
  height: 100vh;
  border-collapse: collapse;
}

.mainRow1 {
  background-color: #7DD2CD;
  height: 10%;
}

.mainRow2 {
  background-color: gray;
  height: 90%;
}

HTML

<table class="tableFull">
  <tr>
    <td class="mainRow1">
    </td>
  </tr>
  <tr>
    <td class="mainRow2">
      test
    </td>
  </tr>
</table>

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