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隐藏空单元格？我也想知道为什么这会显示空单元格。

P.S。使用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>

但这并没有回答这些问题：

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

Answer 1

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

td:empty {
  visibility: hidden;
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

有关:empty伪类的更多信息，请访问https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

Answer 2

尝试the following

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

Answer 3

假设你要隐藏的所有单元都有类'。emty（）'，我想出了这个jQuery：

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

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

aaaaand ... it seems to work。：）

但是，如果hide()没有保留空间，如果您尝试做圆环形状，则会遇到this problem。幸运的是is another question讨论了这个问题，答案是使用

css('visibility','hidden')

您也可以在this fiddle找到。

Answer 4

我发现this解决了我正在阅读的一篇好文章。

我希望它也适合你：

table {
   empty-cells: hide;
}

祝你好运！

Answer 5

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

支持浏览器：Verified Link或Link 2

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

NB：您无法使用border-collapse: collapse;，因为它会禁用看空单元格隐藏

＆＃13;

/******Call-Padding**********/

table { 
  /***
  border-collapse: collapse; #Not use it     ***/
    border-collapse: separate;
    empty-cells: hide;
}

td { 
  border: 1px solid red;
  padding: 10px;
}

＆＃13;

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

＆＃13;

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;，否则无论如何都会绘制空单元格的边框（这会产生粗线）。

隐藏表格中的空单元格

6 个答案: