Menu
How can I make each cell in my table have a minimum width of 3 digits and not much larger? Now I am hard coding min-width, but I don't like to hard code a value, since I may want to change the font in the future. It's ok if Javascript is required.
<!DOCTYPE html>
<html>
<head>
<style>
td { min-width: 27px; }
</style>
</head>
<body style="font-family:sans-serif">
<table border="1">
<tr>
<td>1</td> <!-- width: 27 -->
<td>23</td> <!-- width: 27 -->
<td>456</td> <!-- width: 27 -->
<td>7890</td> <!-- width: 36 -->
</tr>
</table>
</body>
</html>
892
The theoretically best way is to set the minimum width to 3ch, since the ch unit denotes by definition the width of digit zero, “0”. In most fonts, digits have the same width, though in some fonts, digit one “1” might be narrower than others, and in principle, there is no law against designing a font where all digits have different widths. But in most cases, ch equals the width of digits (and is a good approximation to the average width of characters).
In order to deal with older browsers, you can set the minimum width in em units, but this will be guesswork. As a rough rule of thumb, the average width of characters, and the width of digits, is about 0.4em, but this varies by font, and it’s safer here to use 0.5em. So consider setting this way:
td {
min-width: 1.5em;
min-width: 3ch;
}
The point here is that modern browsers will apply the latter declaration. Older browser will ignore it and use the former instead.
59
I would use min-width: 3em;, 3em being 3 times your defined font size.
This means you can increase the font size of the table and the width will increase accordingly.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
