Affichage CSS: la ligne du tableau ne se développe pas lorsque la largeur est définie sur 100%

96

J'ai un petit problème. J'utilise FireFox 3.6 et j'ai la structure DOM suivante:

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

Et le CSS suivant:

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

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

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

Si je décolle, display:table-rowil apparaîtra correctement, avec view-rowune largeur de 100%. Si je le remets, il rétrécit. J'ai mis ceci sur JS Bin:

http://jsbin.com/ifiyo

Que se passe-t-il?

css

— copain de chance
source

90

Si vous utilisez display:table-rowetc., vous avez besoin d'un balisage approprié, qui inclut une table contenant. Sans cela, votre question d'origine fournit essentiellement le mauvais balisage équivalent de:

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

Où est le tableau ci-dessus? Vous ne pouvez pas avoir juste une ligne de nulle part (tr doit être contenue dans les deux table, thead, tbody, etc.)

Au lieu de cela, ajoutez un élément extérieur avec display:table, mettez la largeur de 100% sur l'élément contenant. Les deux cellules intérieures iront automatiquement à 50/50 et aligneront le texte à droite sur la deuxième cellule. Oubliez floatsles éléments de table. Cela causera tellement de maux de tête.

balisage:

<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.
source

11

+5 en se débarrassant des foutus flotteurs!

— chum of chance

37

-1 parce que l'explication est tout simplement fausse. Selon les spécifications CSS2.1 , le balisage / CSS en question est censé fonctionner.

— user123444555621

8

Aucun navigateur n'a de problèmes avec le tableau manquant (Firefox 3.0 avait ...) Le problème réel est que les paramètres de largeur sur les lignes du tableau sont entièrement ignorés . (ce qui signifie que le balisage / CSS en question ne fonctionne en fait pas comme prévu, donc mon commentaire ci-dessus était faux;))

— user123444555621

3

Cette réponse est incorrecte. Le balisage du demandeur est correct. Comme le dit Pumbaa80, le problème est de supposer que la largeur doit être au niveau de la ligne au lieu du niveau de la table. La largeur n'est interprétée qu'au niveau de la table. Les lignes peuvent être complètement omises. Voir ma réponse complète ci-dessous.

— Amin Ariana

1

Je n'ai pas commenté la réponse qui fonctionne. Je faisais un commentaire sur votre commentaire selon lequel vous devez inclure une ligne de tableau en CSS. Vous ne le faites pas. Dire quelque chose est pseudo-valide à cause de vos croyances personnelles est une chose très dogmatique / rigide à dire; Surtout quand le CSS était entièrement valide.

— Bill Rosmus

56

Réponse testée:

Dans le css .view-row, modifiez:

display:table-row;

à:

display:table

et débarrassez-vous de "float" . Tout fonctionnera comme prévu.

Comme cela a été suggéré dans les commentaires, il n'est pas nécessaire de disposer d'une table d'emballage. CSS permet d'omettre des niveaux de l'arborescence (dans ce cas, des lignes) qui sont implicites. La raison pour laquelle votre code ne fonctionne pas est que la "largeur" ne peut être interprétée qu'au niveau de la table, pas au niveau de la ligne de la table. Lorsque vous avez une "table" puis une "table-cellule" juste en dessous, elles sont implicitement interprétées comme étant assis dans une rangée.

Exemple de travail:

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

avec css:

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

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

— Amin Ariana
source

Votre réponse suggère l'équivalent CSS <table><td></td></table>qui, à lui seul, serait un balisage HTML invalide selon le W3C. Pendant qu'il validera, pourquoi suggéreriez-vous de dire au navigateur d'imiter ce balisage?

— KP.

16

Ceci est correct par les règles CSS: w3.org/TR/CSS2/tables.html#anonymous-boxes . Il est plus facile à maintenir en supprimant les lignes de code inutiles (par exemple, le div <view-row> inutile suggéré par KP.). Cela m'a aidé ... je l'utilise. +1

— Bill Rosmus

1

Ne serait-il pas suffisant de se débarrasser des instructions float? Le div .view pourrait conserver sa propriété display: table-row.

— Ideogram

1

C'est bien, ~~ mais ne fonctionne pas sur IE9 pour autant que je sache. ~~ Je me trompe. C'est bien! :)

— f1lt3r

Bien entendu display: table ne sert à rien lorsque vous avez plus d'une ligne. Ils sont tous mal alignés

— edc65

16

Notez que selon la spécification CSS3, vous n'avez PAS à envelopper votre mise en page dans un élément de style tableau. Le navigateur en déduira l'existence d'éléments contenant s'ils n'existent pas.

— John Carney
source

4

La même chose a été spécifiée dans CSS 2.1 , section 17.2.1, top 3.2. L'exemple HBOX / VBOX ci-dessous est exactement le cas en question. On dirait donc que les navigateurs s'en moquent.

— user123444555621

1

donner en .view-typeclasse float:left;ou supprimer le float:right;de.view-name

edit: Enveloppez votre div <div class="view-row">avec un autre div par exemple<div class="table">

et définissez le css suivant:

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

Vous devez utiliser la structure du tableau pour obtenir des résultats corrects.

— Sotiris
source

J'ai testé avec ff3.6, soit 8, chrome, opéra. vous pouvez le voir ici jsbin.com/ifiyo/4 ils les montrent côte à côte

— Sotiris

Je cherchais à avoir un nom à l'extrême droite, à taper à l'extrême gauche ... si vous faites un affichage: en ligne sur les deux et enlevez l'affichage: ligne de tableau ça marche, je pensais qu'il pourrait y avoir un meilleur moyen de faites-le en utilisant les propriétés tableau-ligne / cellule.

— chum of chance

0

Vous pouvez imbriquer une cellule de tableau directement dans un tableau. Vous devez avoir une table. Le démarrage de chaque ligne de table ne fonctionne pas. Essayez-le avec ce 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
source