'How can I make a table cell have a minimum width of 3 digits?

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


Solution 1:[1]

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.

Solution 2:[2]

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.

Solution 3:[3]

td {
    text-overflow: ellipsis; /* will make [...] at the end if you need*/
    width: 3em; /* change to your preferences */
    white-space: nowrap; /* paragraph to one line */
    overflow:hidden; /* older browsers */
    }

That's not possible with CSS, you will have to use the Javascript for that.

read this answer: https://stackoverflow.com/a/2757498/1827690

Solution 4:[4]

What about to use different unit em (CSS Units).

<style>
    td { min-width: 3em; }
</style>

The width should be the 3 time the width of letter m in the font currently used.

Solution 5:[5]

you got two options:

  1. what I suggest: add a class with min-width and add this class to your css so you only have to replace the value once.

  2. the second option (I do not suggest this) is to calculate the width by javascript: Calculate text width with JavaScript. note that this might differ per character, since the m is bigger than the i in non-monospaced fonts.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jukka K. Korpela
Solution 2 SimonR
Solution 3 Community
Solution 4 Community
Solution 5 Community

Related Questions