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

Question 1

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?

Question 2

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;
}

Question 3

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;
}

Question 4

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.

Question 5

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.

Question 6

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>

Answer 1

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?

Answer 2

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

Answer 3

11

+5 en se débarrassant des foutus flotteurs!

chum of chance

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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
la 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

Answer 9

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.

Answer 10

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

Answer 11

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

Answer 12

1

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

f1lt3r

Answer 13

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

edc65

Answer 14

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
la 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

Answer 15

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

Answer 16

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
la 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

Answer 17

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

Answer 18

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

Answer 19

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>

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

Réponses: