如何阻止HTML表格根据单元格内容调整行高？

你的表格行高被撑开主要有三个核心原因：

• CSS里的text-align: center bottom;写法错误，text-align仅控制水平对齐，垂直对齐需要用vertical-align，这个错误会导致布局规则混乱。
• 部分跨多行的单元格（比如.pName、.score）字体尺寸（70px）远大于两行的总高度（25px+30px=55px），浏览器默认会优先保证内容可见，因此会自动撑大行高。
• 仅给<tr>设置height是无效的，表格行的高度由单元格内容决定，必须给<td>/<th>设置高度配合溢出控制。

具体修复步骤： #

1. 修正垂直对齐写法：把text-align: center bottom;拆分成text-align: center; vertical-align: bottom;，分别控制水平和垂直对齐。
2. 限制单元格内容溢出：给所有<td>/<th>添加overflow: hidden;，强制隐藏超出单元格高度的内容，避免撑开行高。
3. 调整行高与字体的匹配关系：对于跨多行的单元格，设置line-height让文字尽量在有限高度内显示，同时确保单元格的总高度等于跨行的行高之和。
4. 覆盖默认的表格布局规则：给单元格设置box-sizing: border-box;，让边框和内边距计入宽高计算。

修改后的完整代码： #

CSS部分

.scoreboard{
  height: 100%;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}
table, th, tr, td {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
  vertical-align: bottom; /* 修正垂直对齐写法 */
  font-family: Verdana;
  box-sizing: border-box; /* 确保边框内边距计入宽高 */
  overflow: hidden; /* 隐藏超出内容，防止撑开行高 */
}
.hdrRowHalf{
  height: 15px;
}
.pRowTop{
  height: 25px;
}
.pRowBot{
  height: 30px;
}
/* 列宽设置保持不变 */
.pNumCol{
  width: 3%;
}
.pNameCol{
  width: 31%;
}
.playerCol{
  width: 37%;
}
.scoreCol{
  width: 22%;
}
.avgCol{
  width: 7%;
}
.throwCol{
  width: 9%;
}
.legsCol{
  width: 7%;
}
/* 调整字体和行高，让内容适配单元格高度 */
.pNum{
  font-size: 25px;
  line-height: 55px; /* 匹配跨行总高度，让文字垂直居中 */
}
.pName{
  font-size: 50px; /* 缩小字体适配55px总高度，避免溢出 */
  line-height: 55px; /* 等于两行总高度25+30 */
}
.score{
  font-size: 50px;
  line-height: 55px;
}
.numThrows{
  font-size: 35px;
  line-height: 25px; /* 匹配pRowTop的高度 */
}
.throws{
  font-size: 35px;
  line-height: 25px;
}
.legs{
  font-size: 45px;
  line-height: 55px;
}
.avg{
  font-size: 35px;
  line-height: 30px; /* 匹配pRowBot的高度 */
}
.total{
  font-size: 45px;
  line-height: 30px;
}

HTML部分（无需修改）

<table class='scoreboard'>
  <tr class='hdrRowHalf'>
    <th rowspan='2' class='pNumCol'>#</th>
    <th rowspan='2' class='pNameCol'>Player</th>
    <th rowspan='2' class='scoreCol'>Score</th>
    <th class='avgCol hdrText'>THR</th>
    <th rowspan='2' class='throwCol'>1</th>
    <th rowspan='2' class='throwCol'>2</th>
    <th rowspan='2' class='throwCol'>3</th>
    <th rowspan='2' class='legsCol'>L</th>
  </tr>
  <tr class='hdrRowHalf'>
    <th class='avgCol'>AVG</th>
  </tr>
  <tr class='pRowTop'>
    <td rowspan='2' class='pNum'>1</td>
    <td id='p1n' rowspan='2' class='pName'>Aaron</td>
    <td id='p1s' rowspan='2' class='score'>501</td>
    <td id='p1nt' class='numThrows'>42</td>
    <td id='p1t1' class='throws'>T20</td>
    <td id='p1t2' class='throws'>D25</td>
    <td id='p1t3' class='throws'>7</td>
    <td id='p1l' rowspan='2' class='legs'>3</td>
  </tr>
  <tr class='pRowBot'>
    <td id='p1a' class='avg'>120</td>
    <td id='p1t' colspan='3' class='total'>180</td>
  </tr>
  <tr class='pRowTop'>
    <td rowspan='2' class='pNum'>2</td>
    <td id='p2n' rowspan='2' class='pName'>&nbsp;</td>
    <td id='p2s' rowspan='2' class='score'>&nbsp;</td>
    <td id='p2nt' class='numThrows'>&nbsp;</td>
    <td id='p2t1' class='throws'>&nbsp;</td>
    <td id='p2t2' class='throws'>&nbsp;</td>
    <td id='p2t3' class='throws'>&nbsp;</td>
    <td id='p2l' rowspan='2' class='legs'>&nbsp;</td>
  </tr>
  <tr class='pRowBot'>
    <td id='p2a' class='avg'>&nbsp;</td>
    <td id='p2t' colspan='3' class='total'>&nbsp;</td>
  </tr>
  <tr class='pRowTop'>
    <td rowspan='2' class='pNum'>3</td>
    <td id='p3n' rowspan='2' class='pName'>&nbsp;</td>
    <td id='p3s' rowspan='2' class='score'>&nbsp;</td>
    <td id='p3nt' class='numThrows'>&nbsp;</td>
    <td id='p3t1' class='throws'>&nbsp;</td>
    <td id='p3t2' class='throws'>&nbsp;</td>
    <td id='p3t3' class='throws'>&nbsp;</td>
    <td id='p3l' rowspan='2' class='legs'>&nbsp;</td>
  </tr>
  <tr class='pRowBot'>
    <td id='p3a' class='avg'>&nbsp;</td>
    <td id='p3t' colspan='3' class='total'>&nbsp;</td>
  </tr>
  <tr class='pRowTop'>
    <td rowspan='2' class='pNum'>4</td>
    <td id='p4n' rowspan='2' class='pName'>&nbsp;</td>
    <td id='p4s' rowspan='2' class='score'>&nbsp;</td>
    <td id='p4nt' class='numThrows'>&nbsp;</td>
    <td id='p4t1' class='throws'>&nbsp;</td>
    <td id='p4t2' class='throws'>&nbsp;</td>
    <td id='p4t3' class='throws'>&nbsp;</td>
    <td id='p4l' rowspan='2' class='legs'>&nbsp;</td>
  </tr>
  <tr class='pRowBot'>
    <td id='p4a' class='avg'>&nbsp;</td>
    <td id='p4t' colspan='3' class='total'>&nbsp;</td>
  </tr>
</table>

额外说明： #

如果坚持要用70px的大字体又不想撑大行高，可以给对应单元格设置更小的line-height并保留overflow: hidden，强制裁剪超出内容：

.pName{
  font-size: 70px;
  line-height: 55px;
  overflow: hidden;
}

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