如何使 <td> 的最小宽度为 3 位数？答案

【问题标题】：How can I make a table cell have a minimum width of 3 digits?如何使 <td> 的最小宽度为 3 位数？
【发布时间】：2013-08-21 09:12:57
【问题描述】：

如何使表格中的每个单元格的最小宽度为 3 位数且不会大很多？现在我正在硬编码min-width，但我不喜欢硬编码一个值，因为我将来可能想更改字体。如果需要javascript也没关系。

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

【问题讨论】：

标签： javascript html html-table css

【解决方案1】：

理论上最好的方法是将最小宽度设置为3ch，因为ch单位根据定义表示数字零的宽度，“0”。在大多数字体中，数字具有相同的宽度，尽管在某些字体中，数字一个“1”可能比其他字体更窄，原则上，没有法律禁止设计所有数字具有不同宽度的字体。但在大多数情况下，ch 等于数字的宽度（并且是字符平均宽度的一个很好的近似值）。

为了应对旧版浏览器，您可以以em 为单位设置最小宽度，但这只是猜测。作为一个粗略的经验法则，字符的平均宽度和数字的宽度约为0.4em，但这因字体而异，这里使用0.5em 更安全。所以考虑这样设置：

td { 
  min-width: 1.5em;
  min-width: 3ch;
}

这里的重点是现代浏览器将应用后一种声明。旧版浏览器会忽略它并使用前者。

【讨论】：

【解决方案2】：

我会使用 min-width: 3em;, 3em 是您定义的字体大小的 3 倍。

这意味着您可以增加表格的字体大小，宽度也会相应增加。

【讨论】：

抱歉不清楚，但字符是数字（0 - 9），我不希望最小宽度远大于三位。
根据字体的不同，您可能会选择 2.5em 甚至 2em，反复调整这些值，直到找到合适的值。
但是我不想要硬编码的值，否则我可以简单地使用27px。
不同之处在于 EM 会随着你的字体大小而缩放，因此它比像素值更灵活。唯一的另一种选择是使用 javascript 来计算 3 个字符（即零）的宽度并将 min-width 设置为。
em 单位与数字的宽度没有明确的关系，实际上，它要大得多。

【解决方案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 */
    }

这在 CSS 中是不可能的，你必须使用 Javascript。

阅读此答案：https://stackoverflow.com/a/2757498/1827690

【讨论】：

【解决方案4】：

如何使用不同的单位 em (CSS Units)。

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

宽度应该是当前使用字体中字母m宽度的3倍。

【讨论】：

@HashemQolami：为什么？那里的单位描述很好。答案就在答案中。
在这种情况下不是。一般来说，最好使用可靠的参考，如 w3c 规范、Mozilla 开发人员、站点点……
应该很容易检查em单位不等于“m”的宽度，甚至接近。此外，问题是关于数字的。
@JukkaK.Korpela：我承认关于 M 的说法并不准确，但它是原始定义 en.wikipedia.org/wiki/… 并且仍然接近。问题是关于数字的，但是没有数字的单位宽度。 digit 和 em 之间的比率可能因字体而异。但数字不能更宽。
@IvanH，关于“m”的说法完全错误，甚至没有接近。请检查“m”（或“M”）的宽度与设置为宽度为1em 的框的宽度。 “原始定义”与 2000 年前的罗马铭文有关。

【解决方案5】：

你有两个选择：

我的建议：用min-width 添加一个类并将这个类添加到你的css，这样你只需替换一次值。
第二个选项（我不建议这样做）是通过javascript计算宽度：Calculate text width with JavaScript。请注意，这可能因字符而异，因为在非等宽字体中 m 比 i 大。

【讨论】：