gpt4 book ai didi

javascript - 如何使表格单元格的最小宽度为 3 位数?

转载 作者:可可西里 更新时间:2023-11-01 12:49:31 26 4
gpt4 key购买 nike

如何使表格中的每个单元格的最小宽度为 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>

最佳答案

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

为了应对旧版浏览器,可以在em中设置最小宽度单位,但这将是猜测。根据粗略的经验,字符的平均宽度和数字的宽度约为 0.4em。 , 但这因字体而异,这里使用 0.5em 更安全.所以考虑这样设置:

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

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

关于javascript - 如何使表格单元格的最小宽度为 3 位数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18353391/

26 4 0
文章推荐: javascript - 如何使用 javascript 函数使隐藏的 html
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com