Wyświetlanie CSS: wiersz tabeli nie rozszerza się, gdy szerokość jest ustawiona na 100%

98

Mam mały problem. Używam FireFox 3.6 i mam następującą strukturę DOM:

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

I następujący CSS:

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

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

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

Jeśli zdejmę display:table-rowto będzie wyglądać poprawnie, z view-rowwyświetlaniem szerokości 100%. Jeśli go odłożę, kurczy się. Umieściłem to na JS Bin:

http://jsbin.com/ifiyo

Co się dzieje?

css

— kumpel przypadku
źródło

90

Jeśli używasz display:table-rowitp., Potrzebujesz odpowiedniego znacznika, który zawiera tabelę zawierającą. Bez tego twoje oryginalne pytanie w zasadzie zapewnia równoważny zły znacznik:

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

Gdzie powyższy stół? Nie można po prostu mieć wiersz znikąd (TR muszą być zawarte w jednej table, thead, tbody, itd.)

Zamiast tego dodaj element zewnętrzny za pomocą display:table, umieść 100% szerokości na elemencie zawierającym. Dwie wewnętrzne komórki automatycznie zmienią się w proporcjach 50/50 i wyrówna tekst bezpośrednio do drugiej komórki. Zapomnij floatso elementach stołu. Spowoduje to wiele bólów głowy.

narzut:

<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.
źródło

11

+5 do pozbycia się tych cholernych pływaków!

— kumpel szansy

37

-1, ponieważ wyjaśnienie jest po prostu błędne. Zgodnie ze specyfikacją CSS2.1 , dany znacznik / CSS powinien działać.

— user123444555621

8

Żadna przeglądarka nie ma żadnych problemów z brakującą tabelą (Firefox 3.0 miał ...). Rzeczywistym problemem jest to, że ustawienia szerokości w wierszach tabeli są całkowicie ignorowane . (co oznacza, że dany znacznik / CSS w rzeczywistości nie działa zgodnie z oczekiwaniami, więc mój komentarz powyżej był błędny;))

— user123444555621

3

Ta odpowiedź jest nieprawidłowa. Znaczniki pytającego są poprawne. Jak mówi Pumba80, problem polega na założeniu, że szerokość musi znajdować się na poziomie wiersza, a nie tabeli. Szerokość jest interpretowana tylko na poziomie tabeli. Wiersze można całkowicie pominąć. Zobacz moją pełną odpowiedź poniżej.

— Amin Ariana,

1

Nie komentowałem odpowiedzi, która działa. Komentowałem twój komentarz, że musisz dołączyć wiersz tabeli w CSS. Ty nie. Powiedzenie czegoś jest pseudo ważne z powodu twoich osobistych przekonań, jest bardzo dogmatyczną / sztywną rzeczą do powiedzenia; Zwłaszcza, gdy CSS był całkowicie poprawny.

— Bill Rosmus

56

Testowana odpowiedź:

W css .view-row zmień:

display:table-row;

do:

display:table

i pozbyć się „float” . Wszystko będzie działać zgodnie z oczekiwaniami.

Jak zasugerowano w komentarzach, nie ma potrzeby stosowania stołu do zawijania. CSS pozwala na pominięcie poziomów struktury drzewa (w tym przypadku wierszy), które są niejawne. Twój kod nie działa, ponieważ „szerokość” może być interpretowana tylko na poziomie tabeli, a nie na poziomie wiersza tabeli. Gdy masz „tabelę”, a następnie „komórkę tabeli” bezpośrednio pod spodem, są one niejawnie interpretowane jako siedzące w rzędzie.

Przykład pracy:

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

z css:

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

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

— Amin Ariana
źródło

Twoja odpowiedź sugeruje, że odpowiednik CSS sam <table><td></td></table>w sobie byłby nieprawidłowym znacznikiem HTML zgodnie z W3C. Chociaż zostanie zweryfikowana, dlaczego sugerowałbyś nakazanie przeglądarce naśladowania tego znacznika?

— KP.

16

Jest to poprawne według reguł CSS: w3.org/TR/CSS2/tables.html#anonymous-boxes . Łatwiej jest go utrzymać, usuwając niepotrzebne wiersze kodu (na przykład niepotrzebny element div <view-row> sugerowany przez KP.). To mi pomogło ... Używam go. +1

— Bill Rosmus

1

Czy nie wystarczyłoby po prostu pozbyć się instrukcji float? Element div .view mógłby zachować swoją właściwość display: table-row.

— Ideogram,

1

To dobrze, ~~ ale nie działa na IE9, o ile wiem. ~~ Mylę się. Wspaniale! :)

— f1lt3r

Oczywiście wyświetlanie: tabela jest bezużyteczna, gdy masz więcej niż 1 wiersz. Wszystkie kończą się źle wyrównanymi

— wypadają wyrównane edc65

16

Zauważ, że zgodnie ze specyfikacją CSS3 NIE musisz zawijać swojego układu w element w stylu tabeli. Przeglądarka wywnioskuje istnienie elementów zawierających je, jeśli one nie istnieją.

— John Carney
źródło

4

To samo zostało określone w CSS 2.1 , sekcja 17.2.1, u góry 3.2. Poniższy przykład HBOX / VBOX jest dokładnie tym przypadkiem. Wygląda na to, że przeglądarki po prostu nie dbają.

— user123444555621

1

podaj na .view-typezajęciach float:left;lub usuń float:right;z.view-name

edycja: Zawijaj swój div<div class="view-row"> na przykład innym div<div class="table">

i ustaw następujący css:

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

Musisz użyć struktury tabeli, aby uzyskać prawidłowe wyniki.

— Sotiris
źródło

Testowałem z ff3.6, czyli 8, chrome, opera. możesz to zobaczyć tutaj jsbin.com/ifiyo/4 pokazują je obok siebie

— Sotiris

Chciałem mieć nazwę po prawej stronie, wpisz po lewej stronie ... jeśli zrobisz wyświetlanie: w wierszu na obu i wyjmij wyświetlacz: wiersz tabeli działa, myślałem, że może być lepszy sposób na zrób to używając właściwości table-row / cell.

— kumpel przypadku

0

Komórkę tabeli można zagnieżdżać bezpośrednio w tabeli. Musisz mieć stół. Rozpoczynanie od jednego wiersza tabeli nie działa. Wypróbuj z tym 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
źródło