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

Question

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>

score 3 · Accepted Answer · answered Aug 21 '13 at 16:23

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.

score 2 · Answer 2 · answered Aug 21 '13 at 09:15

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.

answered Aug 21 '13 at 09:15

SimonR

1,248
9
10

Sorry for not being clear, but the characters are digits (0 - 9), and I don't want the minimum width to be much larger than three digits. – johnchen902 Aug 21 '13 at 09:23
1

Depending on the font you can probably get away with 2.5em or even 2em, play around with the values until you find one that looks right. – SimonR Aug 21 '13 at 09:27
But I don't want hard-coded value, otherwise I can simply use `27px`. – johnchen902 Aug 21 '13 at 09:31
1

The difference is that EM will scale with your font size, so it is more flexible than a pixel value. The only other alternative is to use javascript to count the width of 3 chars (i.e. zeros) and set min-width to that. – SimonR Aug 21 '13 at 09:39
1

The `em` unit has no defined relationship to the width of digits, and in practice, it is much larger. – Jukka K. Korpela Aug 21 '13 at 16:11

score 1 · Answer 3 · edited May 23 '17 at 10:25

1

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

edited May 23 '17 at 10:25

Community

1
1

answered Aug 21 '13 at 09:18

mjimcua

2,781
3
27
47

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

0

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 21 '13 at 09:15

IvanH

5,039
14
60
81

@HashemQolami: Why? The description of units is qite good there. The solution is in the answer. – IvanH Aug 21 '13 at 09:24
Not in this case. Generally, it's better to use reliable references like w3c spec, mozilla developers, sitepoint, ... – Hashem Qolami Aug 21 '13 at 09:27
It should be very easy to check that the `em` unit is not equal to the width of “m”, or even close. Besides, the question was about digits. – Jukka K. Korpela Aug 21 '13 at 16:10
@JukkaK.Korpela: I admit that statement about M is not precise, but it was original definition http://en.wikipedia.org/wiki/Em_(typography)#Incorrect_and_alternative_definitions and still is close. The question is about digits however there is no unit width of a digit. The ratio between digit and em can differ between fonts. But a digit cannot be wider. – IvanH Aug 21 '13 at 16:25
@IvanH, the statement about “m” was simply completely wrong and not even close. Please check the width of “m” (or “M” for that matter) against the width of a box set to have the width of `1em`. The “original definition” related to Roman inscriptions 2,000 years ago. – Jukka K. Korpela Aug 21 '13 at 17:13

score -1 · Answer 5 · edited May 23 '17 at 12:05

-1

you got two options:

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

edited May 23 '17 at 12:05

Community

1
1

answered Aug 21 '13 at 09:17

Joel Harkes

10,975
3
46
65

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

5 Answers5

Linked