I’m creating a table to display dart game scores. For some reason, even though I’m specifying row heights in pixels and table-display is set to fixed, it still resizes the row heights based on the cell contents. For example, if I change the font-size to something larger, the corresponding row get’s higher.
Can anyone tell me what I’m doing wrong?
Here is the HTML for the table:
.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'> </td>
<td id='p2s' rowspan='2' class='score'> </td>
<td id='p2nt' class='numThrows'> </td>
<td id='p2t1' class='throws'> </td>
<td id='p2t2' class='throws'> </td>
<td id='p2t3' class='throws'> </td>
<td id='p2l' rowspan='2' class='legs'> </td>
</tr>
<tr class='pRowBot'>
<td id='p2a' class='avg'> </td>
<td id='p2t' colspan='3' class='total'> </td>
</tr>
<tr class='pRowTop'>
<td rowspan='2' class='pNum'>3</td>
<td id='p3n' rowspan='2' class='pName'> </td>
<td id='p3s' rowspan='2' class='score'> </td>
<td id='p3nt' class='numThrows'> </td>
<td id='p3t1' class='throws'> </td>
<td id='p3t2' class='throws'> </td>
<td id='p3t3' class='throws'> </td>
<td id='p3l' rowspan='2' class='legs'> </td>
</tr>
<tr class='pRowBot'>
<td id='p3a' class='avg'> </td>
<td id='p3t' colspan='3' class='total'> </td>
</tr>
<tr class='pRowTop'>
<td rowspan='2' class='pNum'>4</td>
<td id='p4n' rowspan='2' class='pName'> </td>
<td id='p4s' rowspan='2' class='score'> </td>
<td id='p4nt' class='numThrows'> </td>
<td id='p4t1' class='throws'> </td>
<td id='p4t2' class='throws'> </td>
<td id='p4t3' class='throws'> </td>
<td id='p4l' rowspan='2' class='legs'> </td>
</tr>
<tr class='pRowBot'>
<td id='p4a' class='avg'> </td>
<td id='p4t' colspan='3' class='total'> </td>
</tr>
</table>I’ve tried using div containers and different display types, but nothing seems to work. Row height seems always to be dependent upon font-size.
2
Answers
The issue you are facing might be related to the way you have set the max-height property in your CSS. The max-height property sets the maximum height of an element, but if the content inside the element exceeds this height, it will still expand.
In your case, you’ve set max-height: 25px; for the table tr, which means that the maximum height of each row should be 25 pixels. However, if the content (like larger font size) exceeds this height, the row might expand.
To ensure fixed row heights, you should use height instead of max-height. Try changing this part of your CSS:
table tr {max-height: 25px;}To
table tr {height: 25px;}This change will apply a fixed height of 25 pixels to each row regardless of content. Adjust the values according to your design preferences.
You add many font sizes in your code, move these, and use them as you need. See example-