如何用CSS设置小数位数？仅用CSS能否实现表格单元格保留2位小数

API 探路者

2026-5-26

用CSS实现表格单元格保留2位小数的方法

嘿，这个需求纯CSS是可以搞定的！不过得借助CSS的数字格式化能力，还要给你的HTML做一点点小调整，我给你拆解下具体步骤：

第一步：给HTML表格加个自定义属性

首先，把每个价格单元格里的数字放到data-value这个自定义属性里——这样CSS才能读取到原始数字并进行格式化。修改后的HTML是这样的：

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tr>
    <td>Laptop</td>
    <td data-value="2000.0000">2000.0000</td>
  </tr>
  <tr>
    <td>Mobile</td>
    <td data-value="1000.0000">1000.0000</td>
  </tr>
</table>

第二步：写CSS代码实现格式化

接下来用CSS的number()函数配合伪元素来显示格式化后的数字，同时把原始内容隐藏掉：

/* 隐藏原始的数字内容 */
td[data-value] {
  visibility: hidden;
  position: relative;
}

/* 用伪元素显示格式化后的2位小数 */
td[data-value]::after {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  /* 核心：读取data-value并格式化为2位小数 */
  content: number(attr(data-value), "1.2-2");
}

关键部分解释：

attr(data-value)：读取我们刚才加的自定义属性里的原始数字；
number()函数的第二个参数"1.2-2"是格式化规则：
- 前面的1表示整数部分至少保留1位（避免出现.00这种异常格式）；
- 2-2强制小数部分必须保留2位，不管原始数字有多少位小数；
用visibility而不是display: none隐藏原始内容，是为了保留单元格的原有尺寸，避免布局错乱。