Wie kann ich “display: block” zum Laufen bringen a im IE?

Lesezeit: 3 Minuten

Kann ich irgendetwas tun, damit IE Tabellenzellen als tatsächliche Blöcke anzeigt?

Angesichts dieses Stils:

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 wird genau so gerendert wie die verschachtelten divs in Firefox und Safari/Chrome. Aber im Internet Explorer (8) die Eigenschaft display: block hat keine Wirkung. Die Tabelle wird genau so gerendert, als ob ich diese Eigenschaft nicht festgelegt hätte.

Mein Hauptproblem ist, dass die Zellen nicht brechen; Sie rendern alle in einer Zeile. (Das tbody und tr Elemente erhalten weder Rahmen noch Polsterung. Für mich ist das jetzt aber kein Problem.)

Ich habe bei der Suche keine Informationen zu dem Problem gefunden. Kompatibilitätsdiagramme im Quirksmodus und an anderer Stelle heißt es, dass IE unterstützt display: block seit v. 5.5. Jede Diskussion über Probleme bei der Tabellenanzeige scheint das Gegenteil zu sein – indem Sie Nicht-Tabellenelementen etwas davon geben display: table-* Eigenschaften.

Kann ich also noch einmal etwas tun, damit IE Tabellenzellen als Block rendert?

(Die echte Tabelle ist wirklich eine Tabelle mit tabellarischen Daten. Ich möchte sie so belassen und sie unauffällig umgestalten.)

  • Warum um alles in der Welt würdest du das tun wollen?

    – Kyle

    23. Februar 2011 um 13:35 Uhr

  • Ich gestalte es zu einem Balkendiagramm um, bei dem jede Zeile zu einem horizontalen Balken wird, dessen Breite dem Inhalt einer Zelle entnommen wird, wobei die verbleibenden td:s links aufgereiht sind. Funktioniert perfekt in Firefox, Safari und Chrome.

    – Daniel

    23. Februar 2011 um 13:40 Uhr


  • Ich denke, du solltest meine Antwort besser ignorieren. Stattdessen sollten Sie Javascript/jQuery verwenden, um dynamisch ein Balkendiagramm aus Ihren Tabellendaten zu erstellen. Wie eine Kombination aus Dies und Dies. Ich glaube nicht, dass Sie wahrscheinlich einen Weg finden werden, das zuverlässig zu machen <table>s verhalten sich so, wie Sie es wollen.

    – dreißig Punkte

    23. Februar 2011 um 14:29 Uhr


  • Danke noch einmal. Das stimmt wahrscheinlich. Ich mache sowieso einen Teil der Transformation durch jQuery. Ich habe mich für die Lösung entschieden, die vorhandenen DOM-Objekte zu manipulieren, anstatt sie zu ersetzen, da es sauberer wirkte und gut funktionierte – bis ich zurück zum PC bei der Arbeit und zum IE kam … Oh, na ja. Ich schätze, ich sollte inzwischen wissen, dass ich niemals die Details in einem Browser aufpolieren sollte, bevor ich die Grundlagen insgesamt getestet habe.

    – Daniel

    23. Februar 2011 um 14:50 Uhr


  • Anwendungsfall aus der realen Welt: Chris Coyier ist clever Responsive Datentabellentechnik funktioniert nicht in IE 9 ohne Hilfe.

    – Jordan Grey

    8. Februar 2013 um 11:10 Uhr

Ich bewarb mich float: left zu Sachen. Es funktioniert irgendwie.

Live-Demo

Das größte Problem ist width: 100% kombiniert mit der padding macht die Dinge zu weit.

So:
Live-Demo (ohne das Problem padding)

Das sieht etwas besser aus, aber ich bin mir nicht sicher, wie man das einfach hinzufügen kann padding überall, wenn Sie es brauchen.


Dies schlägt fehl –> kläglich <-- in IE7 (es kommt einfach nicht darüber hinweg, dass es sich um eine <table>), und selbst wenn Sie sich nicht für IE7 interessieren, muss er für Ihren Anwendungsfall optimiert werden (falls er überhaupt verwendbar ist).

IE7:

Geben Sie hier die Bildbeschreibung ein

  • In diesem Fall schlage ich vor, zu divs mit den Eigenschaften display:table (etc) zu wechseln.

    – Marcin

    23. Februar 2011 um 14:23 Uhr

  • @Marcin: Sie müssen die Frage sorgfältiger lesen. Das OP will das ausdrücklich behalten table -Tags und formatieren Sie sie neu: "The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.".

    – dreißig Punkte

    23. Februar 2011 um 14:26 Uhr

  • Wenn Sie die Anzeigeeigenschaften festlegen, fungiert es wirklich als Tabelle. Ich sehe das Problem nicht.

    – Marcin

    23. Februar 2011 um 14:28 Uhr

  • @Marcin: Du sagtest: "I suggest switching to divs" – Das OP sagte (paraphrasiert): "I have my <table>s and I want to make them behave like <div>s". Daran will er nichts ändern <table> HTML, darum geht es mir hier.

    – dreißig Punkte

    23. Februar 2011 um 14:31 Uhr

  • @Marcin: Ich möchte den Kuchen haben und essen, wie ich es in anderen Browsern kann. 😉 Ich bin mir bewusst, dass es andere Optionen für mein aktuelles Markup gibt, und es ist kein großes Problem, aber ich hatte gehofft, dies zu lösen, indem ich auf dem standardmäßigen, nicht aufdringlichen CSS/Javascript aufbaue, das ich bereits habe. Da ich keine Informationen darüber gefunden habe, ob IE dies kann oder nicht kann, oder ob es eine Eigenart gibt, die ich gebrauchen könnte, habe ich auf jemanden gehofft, der mehr weiß, um sich einzumischen. Dann war ich etwas beunruhigt, als das angedeutet wurde unvernünftig sein. (Ich habe diesen letzten Absatz hinzugefügt, um diese Diskussion zu vermeiden …)

    – Daniel

    23. Februar 2011 um 20:10 Uhr


Folgendes hat bei mir für IE6 + funktioniert:

tr {
  display: block;
  position: relative
}

td.col1 {
  display: block;
  left: 0;
  top: 0;
  height: 90px;
}

td.col2 {
  display: block;
  position: absolute;
  left: 0;
  top: 30px;
}

td.col3 {
  display: block;
  position: absolute;
  left: 0;
  top: 60px;
}

Annahmen:

  • Zellenhöhe 30px

Nachteile:

  • Feste Zellenhöhe
  • Umständliche Angabe von top Eigenschaft (vielleicht generieren)
  • Funktioniert nur, wenn HTML Klassen für Spalten bereitstellt

Vorteil:

  • Funktioniert in allen Browsern.

Wann verwenden:

  • Wenn Sie keine Kontrolle über HTML, aber Kontrolle über CSS haben. Einige gehostete Zahlungslösungen kommen mir in den Sinn, die in einem IFRAME angezeigt werden und ein benutzerdefiniertes Stylesheet bieten.

Benutzer-Avatar
Marc van Nieuwenhuijzen

Habe es gerade mit einem Kollegen von mir herausgefunden.

OBWOHL ICH DRINGEND EMPFEHLE, IE8 ÜBERHAUPT NICHT MEHR ZU UNTERSTÜTZEN!
Da Sie die Verwendung eines nicht unterstützten und derzeit unsicheren Produkts ermöglichen, das nicht den aktuellen Standards und Techniken entspricht. Es wäre viel besser, Ihren Benutzern zu sagen, dass sie ein Upgrade durchführen sollen, und ihnen einige Browser-Downloadlinks zur Auswahl zu geben.

Davon abgesehen. Das folgende CSS ist das Mindest-CSS, das Sie benötigen, um es in Internet Explorer 8 zu reparieren.

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

  • „Es wäre viel besser, Ihren Benutzern zu sagen, dass sie ein Upgrade durchführen sollen, und ihnen einige Browser-Downloadlinks zur Auswahl zu geben.“ — Nicht alle Benutzer können upgraden, und viele interessieren sich nicht für Ihre Browser-Upgrade-Meldung oder verstehen sie nicht.

    – Paul D. Waite

    15. Mai 2018 um 10:09 Uhr

  • Ja. Ich stimme zu. Aus diesem Grund habe ich eine kostenlose API erstellt, um dies zu erleichtern. Sehen: webvakman.nl/api/recentbrowserversions

    – Marc van Nieuwenhuijzen

    15. Mai 2018 um 21:25 Uhr

  • @PaulD.Waite Entschuldigung. Ich habe deinen Kommentar falsch verstanden. Einige Leute verstehen es vielleicht nicht, aber das bedeutet nicht, dass Sie es nicht versuchen sollten. Als Webentwickler tragen Sie eine Verantwortung, und IE8 (oder jede andere Version) ist ausgelaufen und sollte nicht mehr verwendet werden. Selbst Microsoft unterstützt es nicht.

    – Marc van Nieuwenhuijzen

    15. Mai 2018 um 21:28 Uhr

  • Ja, ich sage nicht, dass IE 8 eine gute Wahl ist. Ich sage, es liegt eigentlich nicht in Ihrer Verantwortung. Wenn Sie Benutzer auffordern, ihren Browser zu aktualisieren, wenn sie Ihre Website besuchen, ist das ein bisschen so, als würde Ihr lokaler Gemüsehändler Ihnen sagen, dass Sie ein neues Auto kaufen sollen, wenn Sie ein paar Bananen kaufen. Selbst wenn sie Recht haben, ist es nicht das, wofür Sie dorthin gegangen sind, Sie haben keinen besonderen Grund, ihrer Meinung zur Autowartung zu vertrauen, und vielleicht haben Sie im Moment buchstäblich keine Möglichkeit, ein neues Auto zu bekommen.

    – Paul D. Waite

    16. Mai 2018 um 7:23 Uhr

  • Nun, ich denke, Webentwickler stehen Browsern näher als ein Gemüsehändler einem Auto. Es ist eher so, als würde der Gemüsehändler Ihnen sagen, dass Sie das Gemüse nicht in einen altägyptischen Vorratsbehälter geben sollen, weil er nur weiß, dass es nicht luftdicht ist und es dort nicht frisch bleibt. Weißt du, wegen all der anderen Kunden mit verfaultem Gemüse aus ihren altgriechischen Behältern 😀 Es ist eher wie ein Chirurg in der U-Bahn, der jemanden mit einem sehr schlimmen Maulwurf sieht. Er spricht besser und zeigt auf den richtigen Onkologen. Es ist nicht das, was die Person zu diesem Zeitpunkt erwartet hat, aber es könnte sein Leben retten …

    – Marc van Nieuwenhuijzen

    16. Mai 2018 um 8:47 Uhr

Benutzer-Avatar
Lucio Lu

diesen Code hinzufügen:

<!DOCTYPE html>

我这里是这么解决的,加上上面那条声明语句,display: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’ ist sehr gut. Entschuldigung, mein Englisch ist so schlecht.

Benutzer-Avatar
Sumit Chauhan

mach es display:table-row; Anstatt von display:block
Es wird so funktionieren, wie es soll

1180710cookie-checkWie kann ich “display: block” zum Laufen bringen a im IE?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy