如何用CSS或Bootstrap隐藏表格中的整数0与小数0值？

可以通过CSS的:contains()伪类实现隐藏表格中值为0或0.00的单元格内容，以下是具体方案：

基础实现方案 #

在<style>标签中添加如下CSS代码：

/* 隐藏内容包含0或0.00的单元格 */
td:contains("0"), td:contains("0.00") {
  visibility: hidden;
  /* 若希望完全移除单元格占位，可替换为 display: none; */
}

精确匹配优化 #

上述基础方案会误匹配包含0的其他内容（比如10），如果需要仅匹配内容完全是0或0.00的单元格，可以结合:not(:has(*))确保单元格内无嵌套元素，避免干扰：

/* 精确匹配仅包含0或0.00的单元格 */
td:not(:has(*)):contains("0"),
td:not(:has(*)):contains("0.00") {
  visibility: hidden;
}

完整示例代码 #

整合后的HTML代码如下：

<html>
<head>
  <title>Test</title>
  <style>
    td:not(:has(*)):contains("0"),
    td:not(:has(*)):contains("0.00") {
      visibility: hidden;
    }
  </style>
</head>
<body>
  <table border="1">
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
    <tr>
      <td>row1 col1</td>
      <td>row1 col2</td>
      <td>row1 col3</td>
      <td>0.00</td>
    </tr>
    <tr>
      <td>row2 col1</td>
      <td>0</td>
      <td>row2 col3</td>
      <td>2</td>
    </tr>
    <tr>
      <td>row3 col1</td>
      <td>row3 col2</td>
      <td>row3 col3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>row4 col1</td>
      <td>row4 col2</td>
      <td>0</td>
      <td>4</td>
    </tr>
  </table>
</body>
</html>

兼容性说明 #

:contains()和:has()伪类目前已被Chrome、Edge、Safari等现代浏览器支持，若需兼容旧版浏览器，建议结合JavaScript实现精确匹配逻辑。

内容的提问来源于stack exchange，提问作者Rod