隐藏表格中的空单元格

Question

我想隐藏表中的空单元格。这是我的代码：

$(function() {
  $(".empty").each(hideCellIfEmpty);
});

function hideCellIfEmpty() {
  var theCell = $(this);
  if (theCell.html().length == 0) {
    hideSoft(theCell);
  }
}

function hideSoft(jQElement) {
  jqElement.css('visibility', 'hidden');
}

table.empty {
  width: 350px;
  border-collapse: collapse;
  empty-cells: hide;
}
td.empty {
  border-style: solid;
  border-width: 1px;
  border-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="empty">
  <tr>
    <th></th>
    <th>Title one</th>
    <th>Title two</th>
  </tr>
  <tr>
    <th>Row Title</th>
    <td class="empty">value</td>
    <td class="empty">value</td>
  </tr>
  <tr>
    <th>Row Title</th>
    <td class="empty">value</td>
    <td class="empty"></td>
  </tr>
</table>

您可以看到，第二行显示了空单元格。但我想要隐藏它。此外，我不想使用 border-collapse: separate。是否可以使用 border-collapse: collapse 来隐藏空单元格？我还想知道为什么会显示空单元格。

附注：使用 border-collapse: separate 能够起到作用，并且不显示空单元格。

$(function() {
  $(".empty").each(hideCellIfEmpty);
});

function hideCellIfEmpty() {
  var theCell = $(this);
  if (theCell.html().length == 0) {
    hideSoft(theCell);
  }
}

function hideSoft(jQElement) {
  jqElement.css('visibility', 'hidden');
}

table.empty {
  width: 350px;
  border-collapse: separate;
  empty-cells: hide;
}
td.empty {
  border-style: solid;
  border-width: 1px;
  border-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="empty">
  <tr>
    <th></th>
    <th>Title one</th>
    <th>Title two</th>
    <th>Title three</th>
  </tr>
  <tr>
    <th>Row Title</th>
    <td class="empty">value</td>
    <td class="empty">value</td>
    <td class="empty">value</td>
  </tr>
  <tr>
    <th>Row Title</th>
    <td class="empty">value</td>
    <td class="empty"></td>
    <td class="empty">value</td>
  </tr>
</table>

但这并没有回答以下问题：

1. 为什么在使用 border-collapse: collapse 时会显示空单元格?

2. 为什么在使用 border-collapse: separate 时不会显示空单元格?

- Sachin Jain

Answer 1

如果您的网站不需要支持 IE 8 及以下版本，您可以使用 CSS 的 :empty 伪类：

td:empty {
  visibility: hidden;
}

table.empty {
  width: 350px;
  border-collapse: collapse;
  empty-cells: hide;
}
td.empty {
  border-style: solid;
  border-width: 1px;
  border-color: blue;
}
td:empty {
  visibility: hidden;
}

<table class="empty">
  <tr>
    <th></th>
    <th>Title one</th>
    <th>Title two</th>
  </tr>
  <tr>
    <th>Row Title</th>
    <td class="empty">value</td>
    <td class="empty">value</td>
  </tr>
  <tr>
    <th>Row Title</th>
    <td class="empty">value</td>
    <td class="empty"></td>
  </tr>
</table>

关于:empty伪类的更多信息可以在https://developer.mozilla.org/en-US/docs/Web/CSS/:empty找到。

- Peter O

---

感谢 @Peter。这是你提到的新事物。我接受。 - Sachin Jain

感谢您提供的解决方案，非常有效！顺便说一句：通常，标题单元格被标记为th而不是td - 至少在我的情况下，将td更改为th会更好看。 - Nearoo

在我的情况下，display: none; 比 visibility 更有效。 - oelna

Answer 2

刚刚使用了CSS：empty-cells: hide;

支持的浏览器: 已验证链接 或 链接2

table { 
    border-collapse: separate;
    empty-cells: hide;
}

NB: 你不能使用 border-collapse: collapse;，因为它会使得禁用的空单元格消失不见。

/******Call-Padding**********/

table { 
  /***
  border-collapse: collapse; #Not use it     ***/
    border-collapse: separate;
    empty-cells: hide;
}

td { 
  border: 1px solid red;
  padding: 10px;
}

 <table>
  <tr>
   <th>Head1 </th>
   <th>Head2 </th>
   <th>Head3 </th>
   <th>Head4 </th>
  </tr>
  <tr>
   <td>11</td>
   <td>12</td>
   <td>13</td>
   <td>14</td>
  </tr>
  <tr>
   <td>15</td>
   <td>16</td>
   <td></td>
   <td>18</td>
  </tr>
  <tr> 
   <td>19</td>
   <td></td>
   <td>21</td>
   <td>22</td>
  </tr>
  <tr>
   <td></td>
   <td>24</td>
   <td>25</td>
   <td>26</td>
  </tr>
 </table>

- MD Ashik

Answer 3

我在一篇好文章中找到了this解决方案。

我希望它对你也有用：

table {
   empty-cells: hide;
}

最好的问候！

- Borza Adrian

Answer 4

请尝试以下内容

<style type="text/css">
table.empty{
    width:350px;
    border-collapse: collapse;
    empty-cells:hide;
}
td.normal{
    border-style:solid;
    border-width:1px;
    border-color: blue;
}   
td.empty{      
    style:'display=none'
}

---

</style>
<table >
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="normal">value</td>
<td class="normal">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="normal">value</td>
<td class="empty"></td>
</tr>
</table>​

- Nir Alfasi

---

非常感谢。但是我们没有使用empty-cells属性来隐藏空单元格。假设我们正在使用JavaScript填充表格内容，那么我们不知道哪个单元格将为空。在这种情况下，上述解决方案将无法工作。因此，我想使用empty-cells属性。我想知道为什么在border-collapse: collapse的情况下会显示empty-cells？ - Sachin Jain

非常欢迎！在填充表格（使用JS）时，您也可以更改td类。如果您在代码中的两个不同位置进行此操作（不应该这样做），您仍然可以使用JS检查单元格内的值并相应地更改td的类。关于border-collapse，它只将边框设置为单行。 - Nir Alfasi

那是非常好的答案。您提供的替代解决方案几乎让我满意。但我仍在寻找使用空单元格属性的解决方案。顺便说一句，非常感谢。 - Sachin Jain

如果不使用JS/jQuery，它将无法正常工作，因为td的属性会覆盖table的属性，因此边框将被显示。 - Nir Alfasi

将border:collapse更改为border:separate，然后查看空单元格是否被隐藏。请参阅http://jsfiddle.net/blunderboy/gVWQE/4/。 - Sachin Jain

@blunderboy 做得好！你应该发布答案（不要包含jQuery代码，因为它只会让人困惑），并接受它！ - Nir Alfasi

Answer 5

假设您想要隐藏的所有单元格都具有类“empty()”，我使用以下jQuery代码实现了此功能：

$(function(){
    $(".empty").each(hideCellIfEmpty);
});

function hideCellIfEmpty(){
    var theCell = $(this);
    if(theCell.html().length == 0){
        theCell.hide();
    }           
}​

嗯……看起来好像可以工作。 :)

然而，由于hide()不保留空格，如果您尝试做一个甜甜圈形状，就会遇到这个问题。
幸运的是，有另一个问题正在讨论这个问题，答案是使用

css('visibility','hidden')

你也可以在这个代码片段中找到。

- nuala

---

非常感谢您分享的精彩概念。已更新问题。 - Sachin Jain

很高兴你喜欢它 :) 至于 CSS，我在这方面没有太多信心，无法提供有意义的贡献，希望一些聪明的 CSS 大师能找到你的问题 ^^ - nuala

Answer 6

这是另一种解决方案，因为对我来说“td: empty”无效：

<style type="text/css">
    table {
        border-spacing: 0px; // removes spaces between empty cells
        border: 1px solid black;
    }
    tr, td {
        border-style: none; // see note below
        padding: 0px; // removes spaces between empty cells
        line-height: 2em; // give the text some space inside its cell
        height: 0px; // set the size of empty cells to 0
    }
</style>

给定的代码将完全删除任何空行占用的空间。 不幸的是，您必须设置border-style: none;，否则空单元格的边框仍将被绘制（这会导致粗线）。

- Elmy