wake-up-neo.net

Wie kann ich "Anzeigen: Blockieren" auf einem <td> im IE funktionieren lassen?

Kann ich irgendetwas tun, um IE Tabellenzellen als tatsächliche Blöcke anzuzeigen?

Bei diesem Stil:

table,tbody,tr,td,div {
  display: block;
  border: 1px solid #0f0;
  padding: 4px;
}

Und dieses HTML:

<table>
  <tbody>
    <tr>
      <td>R1C1</td>
      <td>R1C2</td>
      <td>R1C3</td>
    </tr>
  </tbody>
</table>

<div>
  <div>
    <div>
      <div>R1C1</div>
      <div>R1C2</div>
      <div>R1C3</div>
    </div>
  </div>
</div>

Die Tabelle entspricht genau den verschachtelten Divs in Firefox und Safari/Chrome. In Internet Explorer (8) hat die Eigenschaft display: block jedoch keine Auswirkungen. Die Tabelle wird genau so dargestellt, als würde ich diese Eigenschaft nicht festlegen.

Mein Hauptproblem ist, dass die Zellen nicht brechen. Sie rendern alle in einer Zeile. (Die Elemente tbody und tr erhalten weder Ränder noch Auffüllung. Dies ist jedoch momentan kein Problem für mich.)

Ich habe bei der Suche keine Informationen zum Problem gefunden. Kompatibilitätskarten on quirksmode und anderswo besagt, dass IE display: block seit v. 5.5 unterstützt. Jede Diskussion über die Anzeigeprobleme von Tabellen scheint zu sein, wenn man die Umkehrung ausführt, indem nicht-Tabellenelementen die display: table-*-Eigenschaften zugewiesen werden.

Gibt es noch etwas, was ich tun kann, um IE Tabellenzellen als Block zu rendern?

(Die echte Tabelle ist wirklich eine Tabelle mit tabellarischen Daten. Ich möchte es auf diese Weise beibehalten und unauffällig umgestalten.)

37
Daniel

Ich habe float: left auf stuff angewendet. Es funktioniert irgendwie.

Live-Demo

Das größte Problem ist, dass width: 100% in Kombination mit der padding zu weit geht.

So:
Live-Demo (ohne problematische padding)

Das sieht ein bisschen besser aus, aber ich bin nicht sicher, wie Sie padding überall einfach hinzufügen können, wenn Sie es brauchen.


Dies schlägt fehl -> miserable <- in IE7 (es wird einfach nicht über die Tatsache hinweg, dass es sich um einen <table> handelt), und selbst wenn Sie sich nicht für IE7 interessieren, muss der Anwendungsfall angepasst werden (wenn es überhaupt brauchbar ist).

IE7:

enter image description here

37
thirtydot

Folgendes hat für mich für IE6 + funktioniert:

 tr {
 Bildschirmsperre;
 position: relativ 
} 

 td.col1 {
 Bildschirmsperre;
 links: 0; 
 oben: 0; 
 Höhe: 90px; 
} 

 td.col2 {
 Bildschirmsperre;
 Position: absolut; 
 links: 0; 
 top: 30px; 
} 

 td.col3 {
 Bildschirmsperre;
 Position: absolut; 
 links: 0; 
 top: 60px; 
} 

Annahmen:

  • zellenhöhe 30px

Nachteile:

  • Feste Zellenhöhe
  • Umständliche Spezifikation der top-Eigenschaft (evtl. generieren)
  • Funktioniert nur, wenn HTML Klassen für Spalten bereitstellt

Vorteil:

  • Funktioniert in allen Browsern.

Wann verwenden:

  • Wenn Sie keine Kontrolle über HTML haben, aber über CSS. Einige gehostete Bezahllösungen erinnern an die Anzeige in einem IFRAME und bieten ein benutzerdefiniertes Stylesheet.
4
cmc

Ich habe es gerade mit einem Kollegen von mir herausgefunden.

AUSSERDEM empfehle ich DRINGEND, IE8 NICHT ZU UNTERSTÜTZEN AT ALLES MEHR! Da Sie die Verwendung eines nicht unterstützten und derzeit unsicheren Produkts erleichtern, das den aktuellen Standards und Techniken nicht entspricht. Es wäre besser, wenn Sie Ihren Benutzern ein Upgrade mitzuteilen und ihnen Browser-Download-Links zur Auswahl geben.

Das wird gesagt. Das folgende CSS ist das Minimum an CSS, das Sie zur Behebung in Internet Explorer 8 benötigen.

table {
   width: 100%;
 }
 td {
   float: left;
   width: 100%;
 }
<table>
  <tbody>
    <tr>
      <td>cell-1</td>
      <td>cell-2</td>
    </tr>
  </tbody>
</table>

fügen Sie diesen Code hinzu:

<!DOCTYPE html>

, 对 是 是 的 的 , , 上面 那条 语句 , Anzeige: Block td 就会 有效。

sie müssen diesen Code oben hinzufügen.

<!DOCTYPE html>
<html>
<head>
    <style>
        td {
            display: block;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <td>First Name</td>
                <td>Last Name</td>
                <td>Job Title</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><div>James</div></td>
                <td><div>Matman</div></td>
                <td><div>Chief Sandwich Eater</div></td>
            </tr>
            <tr>
                <td><div>The</div></td>
                <td><div>Tick</div></td>
                <td><div>Crimefighter Sorta</div></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Fügen Sie diese Codezeile oben hinzu, aber verwenden Sie 'float' und 'width'. Sehr gut . Entschuldigung, mein Englisch ist so schlecht.

0
Lucio Lu

mache es display:table-row; anstelle von display:block.__

0
Sumit Chauhan