CSS-Anzeige: Die Tabellenzeile wird nicht erweitert, wenn die Breite auf 100% eingestellt ist

95

Ich habe ein kleines Problem. Ich verwende FireFox 3.6 und habe die folgende DOM-Struktur:

<div class="view-row">
    <div class="view-type">Type</div>
    <div class="view-name">Name</div>                
</div>

Und das folgende CSS:

.view-row {
width:100%;
display:table-row;
}

.view-name {
display: table-cell;
float:right;
}

.view-type {
display: table-cell;
}

Wenn ich das abnehme display:table-row, wird es korrekt angezeigt, wobei die view-rowBreite 100% beträgt. Wenn ich es zurücklege, schrumpft es. Ich habe dies auf JS Bin eingestellt:

http://jsbin.com/ifiyo

Was ist los?

css Kumpel des Zufalls
quelle

90

Wenn Sie display:table-rowusw. verwenden, benötigen Sie ein geeignetes Markup, das eine enthaltende Tabelle enthält. Ohne sie liefert Ihre ursprüngliche Frage im Grunde das gleiche schlechte Markup von:

<tr style="width:100%">
    <td>Type</td>
    <td style="float:right">Name</td>
</tr>

Wo ist die Tabelle oben? Sie können nicht nur eine Zeile haben aus dem Nichts (tr entweder enthalten sein müssen table, thead, tbody, etc.)

Fügen Sie stattdessen ein äußeres Element hinzu display:tableund setzen Sie die Breite von 100% auf das enthaltende Element. Die beiden inneren Zellen gehen automatisch zu 50/50 und richten den Text direkt auf der zweiten Zelle aus. Vergessen Sie floatsmit Tabellenelementen. Es wird so viele Kopfschmerzen verursachen.

Markup:

<div class="view-table">
    <div class="view-row">
        <div class="view-type">Type</div>
        <div class="view-name">Name</div>                
    </div>
</div>

CSS:

.view-table
{
    display:table;
    width:100%;
}
.view-row,
{
    display:table-row;
}
.view-row > div
{
    display: table-cell;
}
.view-name 
{
    text-align:right;
}

KP.
quelle

11

+5 beim Loswerden der verdammten Schwimmer!

Kumpel des Zufalls

36

-1 weil die Erklärung einfach falsch ist. Gemäß den CSS2.1-Spezifikationen soll das betreffende Markup / CSS funktionieren.

user123444555621

8

Kein Browser hat Probleme mit der fehlenden Tabelle (Firefox 3.0 hatte ...). Das eigentliche Problem ist, dass die Breiteneinstellungen für Tabellenzeilen vollständig ignoriert werden . (was bedeutet, dass das fragliche Markup / CSS tatsächlich nicht wie erwartet funktioniert, daher war mein Kommentar oben falsch;))

user123444555621

3

Diese Antwort ist falsch. Das Markup des Fragestellers ist korrekt. Wie Pumbaa80 sagt, besteht das Problem darin, anzunehmen, dass die Breite auf Zeilenebene statt auf Tabellenebene liegen muss. Die Breite wird nur auf Tabellenebene interpretiert. Zeilen können vollständig weggelassen werden. Siehe meine vollständige Antwort unten.

Amin Ariana

1

Ich habe die Antwort, die funktioniert, nicht kommentiert. Ich habe Ihren Kommentar kommentiert, dass Sie eine Tabellenzeile in CSS aufnehmen müssen. Das tust du nicht. Zu sagen, dass etwas aufgrund Ihrer persönlichen Überzeugungen pseudo-gültig ist, ist eine sehr dogmatische / starre Sache zu sagen; Besonders wenn das CSS vollständig gültig war.

Bill Rosmus

56

Getestete Antwort:

Ändern Sie in der CSS-Ansicht .view:

display:table-row;

zu:

display:table

und "float" loswerden . Alles wird wie erwartet funktionieren.

Wie in den Kommentaren vorgeschlagen, ist keine Wickeltabelle erforderlich. CSS ermöglicht das Weglassen impliziter Ebenen der Baumstruktur (in diesem Fall Zeilen). Der Grund, warum Ihr Code nicht funktioniert, ist, dass "width" nur auf Tabellenebene interpretiert werden kann, nicht auf Tabellenzeilenebene. Wenn Sie eine "Tabelle" und dann eine "Tabellenzelle" direkt darunter haben, werden sie implizit als in einer Reihe sitzend interpretiert.

Arbeitsbeispiel:

<div class="view">
    <div>Type</div>
    <div>Name</div>                
</div>

mit css:

.view {
  width:100%;
  display:table;
}

.view > div {
  width:50%;
  display: table-cell;
}

Amin Ariana
quelle

Ihre Antwort schlägt vor, dass das CSS-Äquivalent für <table><td></td></table>sich genommen ein ungültiges HTML-Markup gemäß W3C wäre. Warum sollten Sie dem Browser anweisen, dieses Markup nachzuahmen, während es validiert wird?

KP.

16

Dies ist nach den CSS-Regeln korrekt: w3.org/TR/CSS2/tables.html#anonymous-boxes . Es ist einfacher zu warten, indem unnötige Codezeilen entfernt werden (z. B. das von KP vorgeschlagene unnötige <view-row> div). Das hat mir geholfen ... ich benutze es. +1

Bill Rosmus

1

Wäre es nicht genug, nur die float-Anweisungen loszuwerden? Das .view div könnte seine Anzeige behalten: table-row-Eigenschaft.

Ideogramm

1

Es ist gut, ~~ aber funktioniert nicht auf IE9, soweit ich das beurteilen kann. ~~ Ich liege falsch. Es ist toll! :)

f1lt3r

Natürlich Anzeige: Tabelle nützt nichts, wenn Sie mehr als eine Zeile haben. Sie alle führen zu einer schlechten

Ausrichtung

16

Beachten Sie, dass Sie gemäß der CSS3-Spezifikation Ihr Layout NICHT in ein Element im Tabellenstil einschließen müssen. Der Browser schließt auf das Vorhandensein enthaltender Elemente, wenn diese nicht vorhanden sind.

John Carney
quelle

4

Dasselbe wurde in CSS 2.1 , Abschnitt 17.2.1, oben 3.2 angegeben. Das folgende HBOX / VBOX-Beispiel ist genau der fragliche Fall. Es sieht also so aus, als ob es Browsern einfach egal ist.

user123444555621

1

Geben Sie auf .view-typeKlasse float:left;oder löschen Sie die float:right;von.view-name

Bearbeiten: Wickeln Sie Ihr <div class="view-row">Div zum Beispiel mit einem anderen Div ein<div class="table">

und setzen Sie das folgende CSS:

.table {
    display:table;
    width:100%;}

Sie müssen die Tabellenstruktur verwenden, um korrekte Ergebnisse zu erzielen.

Sotiris
quelle

Ich habe mit ff3.6 getestet, dh 8, Chrom, Oper. Sie können es hier sehen jsbin.com/ifiyo/4 sie zeigen sie nebeneinander

Sotiris

Ich wollte einen Namen ganz rechts haben, tippe ganz links ... wenn du eine Anzeige machst: Inline auf beiden und die Anzeige herausnehmen: Tabellenzeile funktioniert es, ich dachte, es könnte einen besseren Weg geben Verwenden Sie dazu die Eigenschaften für Tabellenzeilen / Zellen.

Kumpel des Zufalls

0

Sie können Tabellenzellen direkt in Tabellen verschachteln. Du musst einen Tisch haben. Das Starten der Tabellenzeile funktioniert nicht. Versuchen Sie es mit diesem HTML:

<html>
  <head>
    <style type="text/css">
.table {
  display: table;
  width: 100%;
}
.tr {
  display: table-row;
  width: 100%;
}
.td {
  display: table-cell;
}
    </style>
  </head>
  <body>

    <div class="table">
      <div class="tr">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
      </div>
    </div>

      <div class="tr">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
      </div>

    <div class="table">
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
        <div class="td">
          X
        </div>
    </div>

  </body>
</html>

Rakensi
quelle

CSS-Anzeige: Die Tabellenzeile wird nicht erweitert, wenn die Breite auf 100% eingestellt ist

Antworten: