10

テーブルの空のセルを非表示にしたい。これが私のコードです：

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

ご覧のとおり、空のセルが2行目に表示されています。でも隠したい。また、私は使いたくありませんborder-collapse:separate。を使用して空のセルを非表示にすることは可能border-collapse:collapseですか? これが空のセルを表示している理由も知りたいです。

PS Usingborder-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ですか?

4

6 に答える 6

22

サイトが 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を参照してください。

于 2014-06-04T19:41:32.460 に答える
1

非表示にするすべてのセルに「.empty（）」クラスがあると仮定すると、次のjQueryを思いつきました。

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

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

aaaaand...動作するようです。:)

ただし、hide()スペースが保持されないため、ドーナツの形をしようとすると、この問題が発生します。
幸いなことに、この問題を議論する別の質問があり、答えは使用することです

css('visibility','hidden')

あなたもこのフィドルで見つけることができる魔女。

于 2012-08-19T03:20:42.417 に答える
1

CSSを使用しました： empty-cells: hide;

対応ブラウザ:検証済みリンクまたはリンク 2

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

注意:無効にすると空のセルが非表示に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>

于 2016-11-02T07:20:55.213 に答える
1

私が読んでいた良い記事でこの解決策を見つけました。

あなたにも役立つことを願っています：

table {
   empty-cells: hide;
}

よろしくお願いします！

于 2014-04-18T05:30:51.410 に答える
1

以下を試してください

<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>​
于 2012-08-19T02:44:01.667 に答える
-1

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;。そうしないと、空のセルの境界線がとにかく塗りつぶされます (太い線になります)。

于 2014-11-04T08:58:21.940 に答える