CSS, damit der Rand einer leeren Zelle angezeigt wird?

Question 1

Welches CSS sollte ich verwenden, um den Rand einer Zelle anzuzeigen, auch wenn die Zelle leer ist?

IE 7 speziell.

Question 2

Wenn ich mich recht erinnere, existiert die Zelle in einigen IE nicht, es sei denn, sie ist mit etwas gefüllt ...

Wenn Sie ein  (nicht unterbrechendes Leerzeichen) einfügen können, um die Lücke zu füllen, funktioniert dies normalerweise. Oder benötigen Sie eine reine CSS-Lösung?

Anscheinend zeigt IE8 die Zellen standardmäßig an, und Sie müssen sie mit ausblenden. empty-cells:hideIn IE7 (das standardmäßig ausgeblendet ist) funktioniert dies jedoch überhaupt nicht.

Question 3

Eine andere Möglichkeit, um sicherzustellen, dass in allen Zellen Daten vorhanden sind:

   $(document).ready(function() {
      $("td:empty").html("&nbsp;");
    });

Question 4

Wenn Sie die border-collapseEigenschaft auf festlegen collapse, zeigt IE7 leere Zellen an. Es werden jedoch auch die Ränder reduziert, sodass dies möglicherweise nicht zu 100% Ihren Wünschen entspricht

td {
  border: 1px solid red;
}
table {
  border-collapse: collapse;
}
<html> <head> <title>Border-collapse Test</title> <style type="text/css"> td {
  border: 1px solid red;
}
table {
  border-collapse: collapse;
}

<table>
  <tr>
    <td></td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td></td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td></td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td></td>
    <td />
  </tr>
</table>

Erweitern Sie das Snippet

Question 5

Die Frage, die nach einer CSS-Lösung gestellt wurde, aber für den Fall, dass eine HTML-Lösung nicht ausreicht, ist eine:

Versuchen Sie, diese beiden Attribute zum Tabellenelement hinzuzufügen: frame = "box" rules = "all" wie folgt:

<table border="1" cellspacing="0" frame="box" rules="all">

Question 6

Ich habe gerade folgendes gefunden. Es ist standardkonform, funktioniert aber im IE nicht. Seufzer.

empty-cells: show

Question 7

Ich bin auf diese Frage gestoßen und habe keine Antworten gesehen, die das Problem wirklich angesprochen haben.

Das Problem tritt auf, weil IE7 keinen internen Inhalt für die Zelle sieht. In Bezug auf die Programmierung ergibt sich die Zelle als nullund wie die meisten Dinge können Sie keine Grenze setzen nulloder eine Aktion darauf ausführen. Der Browser benötigt ein Element / Objekt mit einem Layout, um einen Rahmen / ein Layout anzuwenden.

Auch wenn der Inhalt leer ist <div></div>oder <span></span>keinen Inhalt enthält, gibt es nichts zu rendern, was wiederum zu diesem nullFall führt.

Sie können den Browser jedoch dazu verleiten, zu glauben, dass die Zelle Inhalt enthält, indem Sie die leeren div/spanLayout-Eigenschaften angeben. Am einfachsten ist es, den CSS-Stil anzuwenden zoom:1.

<table>
   <tr><td>Foo</td>
       <td><span style="zoom:1;"></span></td></tr>
</table>

Diese Problemumgehung ist besser als die Verwendung von a  , da Bildschirmleser nicht unnötig durcheinander gebracht werden und der Wert der Zelle nicht falsch dargestellt wird. In einem neueren Browser können Sie die empty-cell:<show|hide>Alternative verwenden.

Hinweis: Anstelle von Tomalaks Kommentar sollte klar sein, dass hasLayout nichts damit zu tunnullhat. Es war lediglich ein Vergleich der Interaktion und Darstellung von hasLayout durch den Browser, ähnlich wie eine Datenbank oder Programmiersprache mit Nullen interagiert. Es ist eine Strecke, aber ich dachte, es könnte für jene Programmierer, die Webdesigner geworden sind, einfacher zu verstehen sein.

Question 8

Idealerweise sollten Sie keine leeren Zellen in einer Tabelle haben. Entweder haben Sie eine Datentabelle, und in dieser bestimmten Zelle befinden sich keine Daten (die Sie mit "-" oder "n / a /" angeben sollten, oder etwas ähnlich Passendes, oder - wenn Sie müssen - wie vorgeschlagen ), oder Sie haben eine Zelle, die sich über eine Spalte oder Zeile erstrecken muss, oder Sie versuchen, ein Layout mit einer Tabelle zu erzielen, für die Sie CSS verwenden sollten.

Können wir etwas mehr Details haben?

Question 9

Diese Frage ist alt, aber immer noch ein Top-Ergebnis in Google. Ich werde also hinzufügen, was ich gefunden habe:

Durch einfaches Hinzufügen border-collapse: collapsezum Tabellenstil wurde dieses Problem für mich in IE7 behoben (und hatte keinen Einfluss auf die Art und Weise, wie sie in FF, Chrome usw. angezeigt werden).

Vermeiden Sie am besten den überflüssigen Code des Hinzufügens eines  oder anderer Abstandselemente, wenn Sie dies mit CSS beheben können.

Question 10

Ich denke, das geht mit CSS nicht. Sie müssen ein & nbsp; in jeder leeren Zelle, damit der Rand im IE angezeigt wird ...

Question 11

Nur leere Zellen behoben Firefox (JA, ich hatte dieses Problem wirklich in Firefox) IE 7 & 8 waren immer noch problematisch.

Dies funktionierte für mich sowohl in Firefox 3.6.x, IE 7 & 8, Chrome als auch in Safari:

==============================

table {
*border-collapse: collapse;}

.sampleTD {
empty-cells: show;}

==============================

Musste das * verwenden, um sicherzustellen, dass der Tabellenstil nur auf den IE-Browser angewendet wurde.

Question 12

Versuchen Sie dies, wenn Sie keinen nicht zerbrechlichen Speicherplatz verwenden können:

var tn = document.createTextNode('\ ');
yourContainer.appendChild(ta);

Question 13

Ich erstelle einen Div-Stil, der dieselbe Schriftfarbe wie der Hintergrund Ihrer Zelle hat, und schreibe alles (normalerweise ein "-" "n / a" oder "leer"), um den Zelleninhalt zu erhalten. Es wird angezeigt, wenn Sie die Seite markieren, aber bei der Anzeige sieht es normalerweise so aus, wie Sie es möchten.

Question 14

Ich verwende eine Mischung aus HTML und CSS, um browserübergreifende Tabellenraster zu erstellen:

html

<table cellspacing="1" style="background-color:#000;" border="0">

CSS

td{background-color:#fff;}

Ich habe bisher keine Probleme mit Browsern gesehen.

Question 15

"IE" ist in diesem Zusammenhang kein nützlicher Begriff mehr, da IE8 nicht mehr verfügbar ist.

IE7 macht immer "leere Zellen: zeigen" (oder so wurde mir gesagt ... Vista). IE8 führt in einem seiner Modi "Quirks" oder "IE7 Standards" immer "leere Zellen: verstecken" aus. IE8 im Modus "Standards" ist standardmäßig "leere Zellen: show" und unterstützt das Attribut über CSS.

Soweit ich weiß, hat jeder andere Browser dies seit mehreren Jahren korrekt unterstützt (ich weiß, dass es in Firefox 2 hinzugefügt wurde).

Question 16

Ich nehme dies von einer anderen Website, aber:

.sampletable {
border-collapse: collapse;}

.sampleTD {
empty-cells: show;}

Verwendung für das CSS für die Tabelle bzw. das TD-Element.

Answer 1

73

Welches CSS sollte ich verwenden, um den Rand einer Zelle anzuzeigen, auch wenn die Zelle leer ist?

IE 7 speziell.

css Allain Lalonde
quelle

Ich habe dieses Problem in IE6! & nbsp; bisher :(

Problem ist immer noch aktuell in IE8 und IE9

Betlista

Answer 2

Ich habe dieses Problem in IE6! & nbsp; bisher :(

Answer 3

Problem ist immer noch aktuell in IE8 und IE9

Betlista

Answer 4

59

Wenn ich mich recht erinnere, existiert die Zelle in einigen IE nicht, es sei denn, sie ist mit etwas gefüllt ...

Wenn Sie ein  (nicht unterbrechendes Leerzeichen) einfügen können, um die Lücke zu füllen, funktioniert dies normalerweise. Oder benötigen Sie eine reine CSS-Lösung?

Anscheinend zeigt IE8 die Zellen standardmäßig an, und Sie müssen sie mit ausblenden. empty-cells:hideIn IE7 (das standardmäßig ausgeblendet ist) funktioniert dies jedoch überhaupt nicht.

Gewähren
quelle

4

Reines CSS wäre schön. Ich habe bereits nbsps drin, aber es fühlt sich schmutzig an. :)

Allain Lalonde

2

Soweit ich weiß, ist dies die einzige Lösung.

Juan Mendes

12

Ich würde das nicht tun. Fügen Sie stattdessen ein <span style = 'width: 0px;'> </ span> hinzu. Putting & nbsp; wird ein Problem mit Firefox verursachen, wenn es vergrößert wird.

wbkang

2

Wow, das ist ein toller kleiner Tipp wbkang.

definiert

Answer 5

4

Reines CSS wäre schön. Ich habe bereits nbsps drin, aber es fühlt sich schmutzig an. :)

Allain Lalonde

Answer 6

2

Soweit ich weiß, ist dies die einzige Lösung.

Juan Mendes

Answer 7

12

Ich würde das nicht tun. Fügen Sie stattdessen ein <span style = 'width: 0px;'> </ span> hinzu. Putting & nbsp; wird ein Problem mit Firefox verursachen, wenn es vergrößert wird.

wbkang

Answer 8

2

Wow, das ist ein toller kleiner Tipp wbkang.

definiert

Answer 9

44

Eine andere Möglichkeit, um sicherzustellen, dass in allen Zellen Daten vorhanden sind:

   $(document).ready(function() {
      $("td:empty").html("&nbsp;");
    });

Rasmus
quelle

5

Dies funktioniert gut, da Sie es in einer separaten "ie.js" -Datei zur Aufnahme über bedingte Kommentare haben können. In meinem Fall wollte ich mein Backend nicht wegen eines IE-Anzeigefehlers ändern.

Mathew Byrne

Danke, du hast mir genau dort ein paar hundert bedingte Aussagen

erspart

Genial!!! Du hast mir gerade viel Arbeit erspart !!! Ich wünschte, ich könnte mehr als nur eine Gegenstimme geben !!!

KennyZ

es sieht aus wie ein Hack für mich

Leo

Answer 10

5

Dies funktioniert gut, da Sie es in einer separaten "ie.js" -Datei zur Aufnahme über bedingte Kommentare haben können. In meinem Fall wollte ich mein Backend nicht wegen eines IE-Anzeigefehlers ändern.

Mathew Byrne

Answer 11

Danke, du hast mir genau dort ein paar hundert bedingte Aussagen

erspart

Answer 12

Genial!!! Du hast mir gerade viel Arbeit erspart !!! Ich wünschte, ich könnte mehr als nur eine Gegenstimme geben !!!

KennyZ

Answer 13

es sieht aus wie ein Hack für mich

Leo

Answer 14

31

Wenn Sie die border-collapseEigenschaft auf festlegen collapse, zeigt IE7 leere Zellen an. Es werden jedoch auch die Ränder reduziert, sodass dies möglicherweise nicht zu 100% Ihren Wünschen entspricht

td {
  border: 1px solid red;
}
table {
  border-collapse: collapse;
}
<html> <head> <title>Border-collapse Test</title> <style type="text/css"> td {
  border: 1px solid red;
}
table {
  border-collapse: collapse;
}

<table>
  <tr>
    <td></td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td></td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td></td>
    <td>test</td>
  </tr>
  <tr>
    <td>test</td>
    <td></td>
    <td />
  </tr>
</table>

Erweitern Sie das Snippet

rpetrich
quelle

Ich bin mir nicht sicher, ob dies die akzeptierte Antwort sein sollte, da es, wie das Poster zeigt, andere Nebenwirkungen hat, die durchaus unerwünscht sein können. Es ist auch nicht wahr, zumindest soweit ich das überprüfen kann. Können Sie einen Link zu einem Arbeitsbeispiel posten?

Bobby Jack

Ich habe ein Beispiel-HTML-Dokument hinzugefügt, in dem der Rand auch in leeren Zellen angezeigt wird. Getestet in IE7, FX3 und der neuesten Safari. Der Hauptnebeneffekt des Grenzkollapses ist, dass Sie keine doppelten Grenzen haben können, die anständig aussehen. Außerdem können fehlende Zellen nicht gestylt werden, egal wie sehr Sie es versuchen

rpetrich

Grenzkollaps: Kollaps; funktionierte gut für mich (getestet in IE7), danke :)

Nerdess

Answer 15

Ich bin mir nicht sicher, ob dies die akzeptierte Antwort sein sollte, da es, wie das Poster zeigt, andere Nebenwirkungen hat, die durchaus unerwünscht sein können. Es ist auch nicht wahr, zumindest soweit ich das überprüfen kann. Können Sie einen Link zu einem Arbeitsbeispiel posten?

Bobby Jack

Answer 16

Ich habe ein Beispiel-HTML-Dokument hinzugefügt, in dem der Rand auch in leeren Zellen angezeigt wird. Getestet in IE7, FX3 und der neuesten Safari. Der Hauptnebeneffekt des Grenzkollapses ist, dass Sie keine doppelten Grenzen haben können, die anständig aussehen. Außerdem können fehlende Zellen nicht gestylt werden, egal wie sehr Sie es versuchen

rpetrich

Answer 17

Grenzkollaps: Kollaps; funktionierte gut für mich (getestet in IE7), danke :)

Nerdess

Answer 18

24

Die Frage, die nach einer CSS-Lösung gestellt wurde, aber für den Fall, dass eine HTML-Lösung nicht ausreicht, ist eine:

Versuchen Sie, diese beiden Attribute zum Tabellenelement hinzuzufügen: frame = "box" rules = "all" wie folgt:

<table border="1" cellspacing="0" frame="box" rules="all">

Renozu
quelle

1

hmm. funktioniert nicht, wenn die leeren Zellen leer sind, weil sie nicht existieren ... (z. B. Angabe eines tr mit 10 td Zellen, aber andere trs haben 100 oder 1000 td Zellen)

Michael

Kommentar von 2018 hier ... diese Elemente gelten jetzt als veraltet.

Midoriha_senpai

Answer 19

1

hmm. funktioniert nicht, wenn die leeren Zellen leer sind, weil sie nicht existieren ... (z. B. Angabe eines tr mit 10 td Zellen, aber andere trs haben 100 oder 1000 td Zellen)

Michael

Answer 20

Kommentar von 2018 hier ... diese Elemente gelten jetzt als veraltet.

Midoriha_senpai

Answer 21

9

Ich habe gerade folgendes gefunden. Es ist standardkonform, funktioniert aber im IE nicht. Seufzer.

empty-cells: show

Allain Lalonde
quelle

5

Es funktioniert zwar in IE8, geben Sie es also ungefähr ein Jahrzehnt und Sie können loslegen.

Grant

Amüsanterweise funktioniert es auch für ein Standard-HTML <table> in IE6, aber nicht für eine ASP.NET-Tabelle :)

Rich Andrews

Answer 22

5

Es funktioniert zwar in IE8, geben Sie es also ungefähr ein Jahrzehnt und Sie können loslegen.

Grant

Answer 23

Amüsanterweise funktioniert es auch für ein Standard-HTML <table> in IE6, aber nicht für eine ASP.NET-Tabelle :)

Rich Andrews

Answer 24

Ich bin auf diese Frage gestoßen und habe keine Antworten gesehen, die das Problem wirklich angesprochen haben.

Das Problem tritt auf, weil IE7 keinen internen Inhalt für die Zelle sieht. In Bezug auf die Programmierung ergibt sich die Zelle als nullund wie die meisten Dinge können Sie keine Grenze setzen nulloder eine Aktion darauf ausführen. Der Browser benötigt ein Element / Objekt mit einem Layout, um einen Rahmen / ein Layout anzuwenden.

Auch wenn der Inhalt leer ist <div></div>oder <span></span>keinen Inhalt enthält, gibt es nichts zu rendern, was wiederum zu diesem nullFall führt.

Sie können den Browser jedoch dazu verleiten, zu glauben, dass die Zelle Inhalt enthält, indem Sie die leeren div/spanLayout-Eigenschaften angeben. Am einfachsten ist es, den CSS-Stil anzuwenden zoom:1.

<table>
   <tr><td>Foo</td>
       <td><span style="zoom:1;"></span></td></tr>
</table>

Diese Problemumgehung ist besser als die Verwendung von a  , da Bildschirmleser nicht unnötig durcheinander gebracht werden und der Wert der Zelle nicht falsch dargestellt wird. In einem neueren Browser können Sie die empty-cell:<show|hide>Alternative verwenden.

Hinweis: Anstelle von Tomalaks Kommentar sollte klar sein, dass hasLayout nichts damit zu tunnullhat. Es war lediglich ein Vergleich der Interaktion und Darstellung von hasLayout durch den Browser, ähnlich wie eine Datenbank oder Programmiersprache mit Nullen interagiert. Es ist eine Strecke, aber ich dachte, es könnte für jene Programmierer, die Webdesigner geworden sind, einfacher zu verstehen sein.

Answer 25

1

+1 Interessant. Obwohl ich von Ihrer nullAnalogie nicht ganz überzeugt bin .

Leichtigkeitsrennen im Orbit

Answer 26

@Tomalak: Es war der engste Vergleich, mit dem ich hasLayout machen konnte. Wenn keine Elemente / Objekte ein Layout haben, werden sie vom Browser (IE) anders behandelt und beim Rendern werden nicht viele visuelle Einstellungen auf sie und ihre Eltern angewendet. Obwohl dies nicht gleichbedeutend ist, habe ich den Vergleich locker verwendet, da Stack Overflow konzeptionell ein Forum für die Programmierung von Fragen und Antworten war, nicht unbedingt für das Debuggen von Webdesigns - es ist seitdem gewachsen :) Sie haben das Recht, nicht überzeugt zu sein!

Vol7ron

Answer 27

ich habe das {border-bottom: 1px solid red getestet; zoom: 1;} in IE7 und es hilft nicht. der Rand unten erscheint nicht ....

Nerdess

Answer 28

@nerdess: Sie müssten eine Frage erstellen und Ihren genauen Fall zeigen. Möglicherweise laufen andere Dinge, wenn Browser das CSS anders rendern. Wenn Sie beispielsweise dieselbe Eigenschaft zweimal festlegen (z. B. color:blue;color:red;), verwenden einige die erste Leseeinstellung ( blue), andere die letzte Einstellung ( red). border-collapseDies gilt unabhängig von angrenzenden Problemen, die von und so weiter betroffen sein können. Aufgrund all dieser Eigenheiten ist es zu schwierig zu bestimmen, was in Ihrem Fall passieren könnte.

Vol7ron

Answer 29

5

Idealerweise sollten Sie keine leeren Zellen in einer Tabelle haben. Entweder haben Sie eine Datentabelle, und in dieser bestimmten Zelle befinden sich keine Daten (die Sie mit "-" oder "n / a /" angeben sollten, oder etwas ähnlich Passendes, oder - wenn Sie müssen - wie vorgeschlagen ), oder Sie haben eine Zelle, die sich über eine Spalte oder Zeile erstrecken muss, oder Sie versuchen, ein Layout mit einer Tabelle zu erzielen, für die Sie CSS verwenden sollten.

Können wir etwas mehr Details haben?

Bobby Jack
quelle

Ich mag das. Die Klarheit steigt.

Allain Lalonde

1

Wenn Sie eine sehr große Tabelle (Zehntausende von Zellen oder größer) mit vielen Zellen ohne Inhalt (75-95%) haben, ist es möglicherweise leistungsfähiger, leere Zellen zu haben.

Michael

Answer 30

Ich mag das. Die Klarheit steigt.

Allain Lalonde

Answer 31

1

Wenn Sie eine sehr große Tabelle (Zehntausende von Zellen oder größer) mit vielen Zellen ohne Inhalt (75-95%) haben, ist es möglicherweise leistungsfähiger, leere Zellen zu haben.

Michael

Answer 32

Diese Frage ist alt, aber immer noch ein Top-Ergebnis in Google. Ich werde also hinzufügen, was ich gefunden habe:

Durch einfaches Hinzufügen border-collapse: collapsezum Tabellenstil wurde dieses Problem für mich in IE7 behoben (und hatte keinen Einfluss auf die Art und Weise, wie sie in FF, Chrome usw. angezeigt werden).

Vermeiden Sie am besten den überflüssigen Code des Hinzufügens eines  oder anderer Abstandselemente, wenn Sie dies mit CSS beheben können.

Answer 33

2

Ich denke, das geht mit CSS nicht. Sie müssen ein & nbsp; in jeder leeren Zelle, damit der Rand im IE angezeigt wird ...

fijter
quelle

Answer 34

Nur leere Zellen behoben Firefox (JA, ich hatte dieses Problem wirklich in Firefox) IE 7 & 8 waren immer noch problematisch.

Dies funktionierte für mich sowohl in Firefox 3.6.x, IE 7 & 8, Chrome als auch in Safari:

==============================

table {
*border-collapse: collapse;}

.sampleTD {
empty-cells: show;}

==============================

Musste das * verwenden, um sicherzustellen, dass der Tabellenstil nur auf den IE-Browser angewendet wurde.

Answer 35

Die Verwendung von CSS-Hacks kann unerwartete Folgen haben. Eine andere Möglichkeit ist die Verwendung von bedingtem CSS.

Spanne

Answer 36

Versuchen Sie dies, wenn Sie keinen nicht zerbrechlichen Speicherplatz verwenden können:

var tn = document.createTextNode('\ ');
yourContainer.appendChild(ta);

Answer 37

1

Ich erstelle einen Div-Stil, der dieselbe Schriftfarbe wie der Hintergrund Ihrer Zelle hat, und schreibe alles (normalerweise ein "-" "n / a" oder "leer"), um den Zelleninhalt zu erhalten. Es wird angezeigt, wenn Sie die Seite markieren, aber bei der Anzeige sieht es normalerweise so aus, wie Sie es möchten.

Brett Haynes
quelle

Wie verbessert / ergänzt dies die 13 anderen Antworten?

random_user_name

Answer 38

Wie verbessert / ergänzt dies die 13 anderen Antworten?

random_user_name

Answer 39

Ich verwende eine Mischung aus HTML und CSS, um browserübergreifende Tabellenraster zu erstellen:

html

<table cellspacing="1" style="background-color:#000;" border="0">

CSS

td{background-color:#fff;}

Ich habe bisher keine Probleme mit Browsern gesehen.

Answer 40

"IE" ist in diesem Zusammenhang kein nützlicher Begriff mehr, da IE8 nicht mehr verfügbar ist.

IE7 macht immer "leere Zellen: zeigen" (oder so wurde mir gesagt ... Vista). IE8 führt in einem seiner Modi "Quirks" oder "IE7 Standards" immer "leere Zellen: verstecken" aus. IE8 im Modus "Standards" ist standardmäßig "leere Zellen: show" und unterstützt das Attribut über CSS.

Soweit ich weiß, hat jeder andere Browser dies seit mehreren Jahren korrekt unterstützt (ich weiß, dass es in Firefox 2 hinzugefügt wurde).

Answer 41

Ich nehme dies von einer anderen Website, aber:

.sampletable {
border-collapse: collapse;}

.sampleTD {
empty-cells: show;}

Verwendung für das CSS für die Tabelle bzw. das TD-Element.

CSS, damit der Rand einer leeren Zelle angezeigt wird?

Antworten: