Issue
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>
Solution
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.
Answered By - Jukka K. Korpela Answer Checked By - Marie Seifert (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.