[英]How can I make a <td> have a minimum width of 3 digits?
如何让表格中的每个单元格的最小宽度为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>
我会用min-width: 3em; ， 3em是你定义的字体大小的3倍。
这意味着您可以增加表格的字体大小，宽度也会相应增加。
理论上最好的方法是将最小宽度设置为3ch ，因为ch单位根据定义表示数字零的宽度“0”。 在大多数字体中，数字具有相同的宽度，但在某些字体中，数字1“1”可能比其他字体窄，并且原则上，没有法律禁止设计所有数字具有不同宽度的字体。 但在大多数情况下， ch等于数字的宽度（并且是字符平均宽度的良好近似值）。
为了处理旧浏览器，您可以设置以em单位的最小宽度，但这将是猜测。 作为一个粗略的经验法则，字符的平均宽度和数字宽度约为0.4em ，但这取决于字体，使用0.5em更安全。 所以考虑这样设置：
td {
min-width: 1.5em;
min-width: 3ch;
}
这里的要点是现代浏览器将应用后一种声明。 较旧的浏览器将忽略它并使用前者。
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。
你有两个选择：
我建议：添加一个min-width的类，并将此类添加到您的CSS，所以你只需要替换一次值。
第二个选项（我不建议这个）是通过javascript 计算宽度：使用JavaScript计算文本宽度 。 请注意，每个字符可能会有所不同，因为m大于非等宽字体中的i。
我如何使 html 表没有动态列，这些列的宽度会根据数据量而改变<td>
[英]How do i make a html table not have dynamic columns that change size in width depending on the amount of data in a <td>
如何使用JavaScript获取HTML文档“所需”的最小宽度？
[英]How can I get the minimum width an HTML document 'needs' using javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.