Welches CSS sollte ich verwenden, um den Rand einer Zelle anzuzeigen, auch wenn die Zelle leer ist?
IE 7 speziell.
Antworten:
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.
Eine andere Möglichkeit, um sicherzustellen, dass in allen Zellen Daten vorhanden sind:
$(document).ready(function() {
$("td:empty").html(" ");
});
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>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">
Ich habe gerade folgendes gefunden. Es ist standardkonform, funktioniert aber im IE nicht. Seufzer.
empty-cells: show
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.
nullAnalogie nicht ganz überzeugt bin .
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.
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?
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.
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.
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.
"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).