Ausblenden leerer Zellen in der Tabelle

Möchte ich ausblenden von leeren Zellen in der Tabelle. Hier ist mein code:

JS:

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

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

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

CSS:

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

HTML:

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

Können Sie sehen, leere Zelle gezeigt in der 2. Reihe. Aber ich möchte, um es zu verstecken. Außerdem möchte ich nicht verwenden border-collapse:separate. Ist dies möglich zu verbergen die leere Zelle mit border-collapse:collapse? Außerdem möchte ich wissen, warum dies so ist, zeigen die leeren Zellen.

P. S. Mit border-collapse: separate arbeitet und nicht leere Zellen anzeigen.

JS:

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

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

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

CSS:

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

HTML:

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

Aber das bedeutet nicht, diese Fragen zu beantworten:

  1. Warum leere Zellen werden angezeigt, wenn border-collapse: collapse verwendet wird ?

  2. Warum leere Zelle nicht angezeigt, wenn border-collapse: separate verwendet wird ?

InformationsquelleAutor sachinjain024 | 2012-08-19
  1. 18

    Wenn Ihre Website erfordert keine Unterstützung für den IE 8 und unter, Sie könnte verwenden Sie einfach die CSS - :empty pseudo-Klasse:

    td:empty {
  visibility: hidden;
}

    CSS:

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

    HTML:

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

    Mehr über die :empty pseudo-Klasse finden Sie unter https://developer.mozilla.org/en-US/docs/Web/CSS/:empty

    • Danke @Peter. Das ist eine neue Sache, die Sie erwähnt haben. Ich akzeptiere
    • Vielen Dank für die Lösung, funktioniert sehr gut! Randbemerkung: Oft sind die header-Zellen gekennzeichnet sind, als th und nicht td - zumindest in meinem Fall, verändert td zu th wurde besser.
    InformationsquelleAutor Peter O
  2. 1

    Vorausgesetzt, alle Zelle, die Sie ausblenden möchten, haben Sie die Klasse .empty() kam ich mit diesem Teil von jQuery:

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

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

    uuuuund... es scheint zu funktionieren. 🙂

    Jedoch als hide() nicht Platz sparen Sie in dieses problem, wenn Sie versuchen, eine donut-Form.

    Zum Glück gibt es ist eine andere Frage diskutieren diese Problematik und die Antwort ist die Verwendung 

    css('visibility','hidden')

    Hexe, die Sie auch in diese Geige.

    • vielen Dank für das wunderbare Konzept, das Sie geteilt haben. Aktualisiert die Frage.
    • Froh, es gefällt Euch 🙂 Wie bei CSS bin ich mir nicht so sicher in dieser Sache zu tragen, etwas sinnvolles, so hoffen wir, dass einige kluge CSS-guru Antwort auf Ihre Frage finden ^^
    InformationsquelleAutor nuala
  3. 1

    Fand ich diese Lösung auf einen guten Artikel Las ich.

    Ich hoffe, es wird auch für Sie arbeiten:

    table {
   empty-cells: hide;
}

    Beste Grüße!

    InformationsquelleAutor Borza Adrian
  4. 1

    Versuchen der

    <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>​
    • Vielen Dank. Aber Wir haben nicht verwendet, leere-Zellen-Eigenschaft zum ausblenden von leeren Zellen. Nehmen wir an, wir füllen den Inhalt der Tabelle mit Hilfe von java script, dann wissen wir nicht, die Zelle ist wird leer sein. In diesem Fall wird die oben genannte Lösung nicht funktioniert. So will ich mit empty-cells-Eigenschaft verwendet werden. Und ich will wissen, den Grund leeren Zellen angezeigt werden, die mit border-collapse: collapse ?
    • Sie sind das meiste willkommen! Beim ausfüllen der Tabelle (mit JS), die Sie ändern können, die td Klasse als gut. Wenn Sie tun, dass Sie in zwei verschiedenen stellen im code (was Sie nicht sollte), können Sie noch überprüfen Sie den Wert im inneren der Zelle mithilfe von JS und ändern Sie die Klasse von der td beziehungsweise. Über border-collapse, es stellt nur die Grenze für eine einzelne Zeile.
    • Das war eine ziemlich gute Antwort. Ich bin fast zufrieden durch die alternative Lösung für mein problem. Ich bin noch in der Jagd nach der Lösung, die mit leere-Zelle-Eigenschaft.. BTW vielen Dank.
    • Es wird nicht funktionieren ohne die Verwendung JS/jQuery, da die Eigenschaften der td überschreiben der Eigenschaften von table daher der Ränder wird angezeigt.
    • Ändern border:collapse border:trennen und sehen, leeren Zellen habe versteckt. Prüfen Sie das jsfiddle.net/blunderboy/gVWQE/4
    • gute Arbeit! sollten Sie post die Antwort (ohne den jQuery-code, weil es einfach nur verwirrend) und es akzeptieren!

    InformationsquelleAutor alfasin
  5. 0

    Nur CSS: empty-cells: hide;

    Browser unterstützt: Verifiziert Link oder Link 2

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

    NB: Sie nicht verwenden können border-collapse: collapse; weil es Deaktivieren Aussehen leere Zelle ausblenden

    CSS:

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

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

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

    HTML:

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

    InformationsquelleAutor MD Ashik
  6. -1

    Hier ist eine andere Lösung eignet sich auch, da td:empty hat bei mir nicht funktioniert:

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

    Den angegebenen code vollständig zu entfernen wird jedem Raum eine leere Zeile, sonst in Anspruch nehmen.
    Leider müssen Sie border-style: none;, sonst die Grenzen der leeren Zellen, die lackiert werden sowieso (die Ergebnisse in Dicke Linien).

    • wenn es nicht für Sie arbeiten, sind Sie entweder tun es falsch, oder Sie sind mit IE < 9, das ist eine Todsünde unter Programmierern 😉
    InformationsquelleAutor Elmy
Schreibe einen Kommentar