隐藏表格中的空单元格 [英] Hide empty cells in table

问题描述

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

<预类= 片段码-JS郎-JS prettyprint-越权 > $（函数（）{$（ 空），每个（hideCellIfEmpty）;}）;功能hideCellIfEmpty （）{var theCell = $（this）; if（theCell.html（）。length == 0）{hideSoft（theCell）;函数hideSoft（jQElement）{jqElement.css（'visibility'，'hidden'）;}

  table.empty {width：350px;边界崩溃：崩溃; 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> <的第i;< /第> < th>标题一< / th> < th>标题二< / th> < / TR> < TR> < th>行标题< / th> < td class =empty> value< / td> < td class =empty> value< / td> < / TR> < TR> < th>行标题< / th> < td class =empty> value< / td> < td class =empty>< / td> < / tr>< / table>  

你可以看到，空单元格显示在第2行。但我想隐藏它。而且，我不想使用 border-collapse：单独的。是否可以使用 border-collapse：collapse 来隐藏空单元格？我也想知道为什么这会显示空单元格。

P.S。使用 border-collapse：单独的正在运行，并且不显示空单元格。

  $（function（）{$（。empty）。each（hideCellIfEmpty）;}）; function hideCellIfEmpty（）{var theCell = $（this）; if（theCell.html（）。length == 0）{hideSoft（theCell）;函数hideSoft（jQElement）{jqElement.css（'visibility'，'hidden'）;}  

  table.empty {width：350px;边界崩溃：分开; 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> <的第i;< /第> < th>标题一< / th> < th>标题二< / th> < th>标题三< / th> < / TR> < TR> < th>行标题< / th> < td class =empty> value< / td> < td class =empty> value< / td> < td class =empty> value< / td> < / TR> < TR> < th>行标题< / th> < td class =empty> value< / td> < td class =empty>< / td> < td class =empty> value< / td> < / tr>< / table>  

但这样做不回答这些问题：

1. 为什么 border-collapse：collapse ？




2. 当 border-collapse：单独被使用？







解决方案

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

  td：empty {
 visibility：hidden; 
} 
  

  table.empty {width ：350px;边界崩溃：崩溃; empty-cells：hide;} td.empty {border-style：solid; border-width：1px; border-color：blue;} td：empty {visibility：hidden;}  

 < table class =empty> < TR> <的第i;< /第> < th>标题一< / th> < th>标题二< / th> < / TR> < TR> < th>行标题< / th> < td class =empty> value< / td> < td class =empty> value< / td> < / TR> < TR> < th>行标题< / th> < td class =empty> value< / td> < td class =empty>< / td> < / tr>< / table>  

更多关于：empty 伪类可以在 https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

I want to hide empty cells in table. Here is my code:

$(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>

You can see, empty cell is shown in 2nd row. But I want to hide it. Moreover, I don't want to use border-collapse:separate. Is this possible to hide the empty cell using border-collapse:collapse? I also want to know why this is showing empty cells.

P.S. Using border-collapse: separate is working and does not show empty cells.

$(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>

But this does not answer these questions:

1. Why empty-cells are displayed when border-collapse: collapse is used ?

2. Why empty cell are not displayed when border-collapse: separate is used ?

解决方案

If your site doesn't require support for IE 8 and under, you could just use the CSS :empty pseudo-class:

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>

More about the :empty pseudo-class can be found at https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

这篇关于隐藏表格中的空单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！