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

Question

我正在创建一个表格来显示飞镖游戏得分。由于某种原因，即使我指定行高（以像素为单位）并且表格显示设置为固定，它仍然会根据单元格内容调整行高的大小。例如，如果我将字体大小更改为更大，则相应的行会变得更高。

谁能告诉我我做错了什么？

这是该表的 HTML：

 .scoreboard{
  height: 100%;
  width: 100%;
  table-layout: fixed;
}
table, th, tr, td {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center bottom;
  font-family: Verdana;
}
table tr {
  max-height: 25px;
}
.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;
  text-align: center;
}
.pName{
  font-size: 70px;
}
.score{
  font-size: 70px;
  text-align: center;
}
.numThrows{
  font-size: 35px;
  text-align: center;
}
.throws{
  font-size: 35px;
  text-align: center;
}
.legs{
  font-size: 55px;
  text-align: center;
}
.avg{
  font-size: 35px;
  text-align: center;
}
.total{
  font-size: 45px;
  text-align: center;
}

<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>

我尝试过使用 div 容器和不同的显示类型，但似乎没有任何效果。行高似乎总是取决于字体大小。

Answer 1

您面临的问题可能与您在 CSS 中设置 max-height 属性的方式有关。

max-height 属性设置元素的最大高度，但如果元素内部的内容超过此高度，它仍然会扩展。

在您的情况下，您为表 tr 设置了

max-height: 25px;，这意味着每行的最大高度应为 25 像素。但是，如果内容（例如较大的字体大小）超过此高度，则该行可能会扩展。

为了确保固定的行高，您应该使用 height 而不是

max-height。尝试更改 CSS 的这一部分：

table tr {max-height: 25px;}

到

table tr {height: 25px;}

无论内容如何，此更改都会对每行应用 25 像素的固定高度。根据您的设计偏好调整值。