Question

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

Answer 1

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

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

Answer 2

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

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

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

现在的观点是，现代浏览器将应用后一种声明。较旧的浏览器将忽略它并使用前者。

Answer 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

Answer 4

如何使用不同的单位em（CSS Units）。

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

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

Answer 5

你有两个选择：

我的建议：添加一个min-width的课程，并将此课程添加到您的css中，这样您只需要替换一次该值。
第二个选项（我不建议这样做）是通过javascript计算宽度：Calculate text width with JavaScript。请注意，每个字符可能会有所不同，因为m大于非等宽字体中的i。

如何使最小宽度为3位？

5 个答案: