有没有一种方法可以仅使用 HTML/CSS 来隐藏基于特定值的数据单元格？

Question

例如我有这个代码：

<table>
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td>0</td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td class="results"></td>
    </tr>
</table>

有没有办法仅使用 HTML/CSS 隐藏等于 $0 的单元格？假设我有一个名为 fee 的变量而不是 $0，它可以是各种值：$0、$20、$100 等。

例如：

<script>
    var fees = ["[=12=]", "", "0"];
    document.querySelector('.results').innerHTML = fees[1];
</script>

有没有办法检查它是什么值，如果发现它是 $0，我可以隐藏它吗？

我的 CSS 是：

table{
    border-width: 1px;
    border-style: solid;
    border-collapse: separate;
    width: 400px;
}

#test{
    empty-cells: show;
    margin-bottom: 20px;
}

tr, th, td{
    border-width:1px;
    border-style: solid;
}

.results {
    display: none;     // I want this to only display none when fees = [=13=]
}

Answer 1

TL;DR：有可能。在我的答案中寻找最后一个解决方案，或查看此博客：

Conditional formatting with pure css

我假设您不想隐藏单元格，而只想隐藏它的值。隐藏单元格在 table 中没有意义，因为它可能会改变布局，而且任何单元格边框等也将被隐藏 - 可能不是您想要的。

现在 CSS 没有任何基于元素文本内容的选择器。但它确实支持属性值选择器。因此，您可以将代码更改为：

<table>
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td><input value="0"/></td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td><input value="[=10=]"/></td>
    </tr>
</table>

并使用

这样的规则

input[value="[=11=]"] {
    display: none;
}

您甚至可以通过添加 disabled 属性使输入的行为不像输入，这样它们就不是 editable。

如果您不想使用输入元素，可以考虑改用 span 并使用 "data-value" 属性，并尝试浏览器是否尊重该属性：

<table>
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td><span data-value="0">0</span></td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td ><span data-value="[=12=]">[=12=]</span></td>
    </tr>
</table>

css 将是：

td > span[data-value="[=13=]"] {
    display: none;
}

当然这样做的缺点是你必须添加两次值（一次作为文本内容，一次作为属性），并且你需要生成一个内部span元素，感觉有点难看。

或者，您可以尝试添加包含该值的 class 属性并创建 class 选择器：

<table>
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td ><span class="value100">0</span></td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td ><span class="value0">[=14=]</span></td>
    </tr>
</table>

而 css 将是：

td span.value0 {
    display: none;   
}

当然缺点和前面的方法一样——你必须生成两次值，一次是文本内容，一次是class名称，你需要添加内部跨度。

编辑：美元字符在 css class 名称中无效，所以我删除了它。

EDIT2：事实证明，有一种方法可以做到这一点，而无需将值同时复制为文本和属性。作为奖励，事实证明，如果我们依赖 :after pseudoclass，你也不需要内部跨度（因为隐藏的是 class，而不是单元格本身）：

<table border="1">
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td data-value="0"></td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td data-value="[=16=]"></td>
    </tr>
</table>

使用这个 css:

  td:after {
      content: attr(data-value);
  }

  td[data-value="[=17=]"]:after {
      content: "";
  }

有没有一种方法可以仅使用 HTML/CSS 来隐藏基于特定值的数据单元格？

Is there a way to hide a data cell based on a specific value using just HTML/CSS?

javascript

html

css

html-table

cell