如何使用引导程序 3 在表格中隐藏空单元格答案

【问题标题】：how can I hide empty cells in a table with bootstrap 3如何使用引导程序 3 在表格中隐藏空单元格
【发布时间】：2014-10-19 20:49:51
【问题描述】：

我想知道如何在使用 Bootstrap 3 时隐藏表格中的空单元格。基本上我正在尝试创建一个 6x6 表格的日历，但我想隐藏空单元格的边框。我尝试将以下内容包含在一个 css 文件中（我在引导 css 文件之后找到了该文件），但它可能仍然被覆盖，因为它不起作用：

table {
empty-cells:hide;
}

还有什么方法可以让我动态地做到这一点，因为不同的日历月并不总是从第一行的同一个单元格开始等等。也许一些 jquery 以空单元格为目标，然后删除它们的边框？

谢谢

【问题讨论】：

【解决方案1】：

您必须将样式应用于<td> 元素：

table td {
  empty-cells: hide;
}

如果你想动态地做，那么使用一个类来标记那些应该有隐藏边框的空单元格：

table td.bashful {
  empty-cells: hide;
}

【讨论】：

我尝试了您的解决方案，但它仍然没有隐藏空单元格。关于动态执行此操作，我知道我必须有一个特定的类，但我问的是问题的技术部分 - 我能想到的唯一方法是说 //loop through td elements if ($( this).html() == "") { $(this).classed('.emptyCells') = true; } // 绘制表格时应用 css 类 $('.emptyCells').classed('.bashful') = true;这是一个好方法吗？
@user3281466 差不多 - 你可以找到空单元格和.addClass("bashful")
好的，太好了。为什么你认为引导程序仍然覆盖空单元格：隐藏；财产？我读到您有时需要编写 !important 关键字，但我实际上不确定如何/在哪里使用它？
@user3281466 我不知道 - 您可以使用浏览器 DOM 检查器查看表格单元格在哪里获取样式。
嘿，我刚刚检查了一下，它说它首先从引导程序中获取边框，然后它也获取了我的一点 css 代码。我假设如果我的 css 在 bootstrap 之后，那么它肯定应该覆盖它吗？

【解决方案2】：

好的，所以问题是由覆盖我的 css 的 border-collapse: collapse; 引起的。在我的 css 中包含 border-collapse: separate; 解决了这个问题。

【讨论】：