web-dev-qa-db-fra.com

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

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

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

Et les CSS suivants:

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

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

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

Si j'enlève le display:table-row il apparaîtra correctement, avec le view-row montrant une largeur de 100%. Si je le remets, il diminue. J'ai mis cela sur JS Bin:

http://jsbin.com/ifiyo

Que se passe-t-il?

csscss3
91
chum of chance

Si vous utilisez display:table-row etc., alors vous avez besoin d'un balisage approprié, qui inclut un tableau contenant. Sans cela, votre question initiale fournit essentiellement le mauvais balisage équivalent de:

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

Où est la table ci-dessus? Vous ne pouvez pas avoir une ligne qui vient de nulle part (tr doit être contenu dans table, thead, tbody, etc.)

Au lieu de cela, ajoutez un élément externe avec display:table, mettez la largeur à 100% sur l'élément conteneur. Les deux cellules à l'intérieur iront automatiquement à 50/50 et aligneront le texte directement sur la deuxième cellule. Oubliez floats avec des éléments de table. Ça va causer 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;
}
84
KP.

Réponse testée:

Dans le css .view-row, changez:

display:table-row;

à:

display:table

et se débarrasser de "float". Tout fonctionnera comme prévu.

Comme cela a été suggéré dans les commentaires, il n’est pas nécessaire de créer une table d’emballage. CSS permet d'omettre les niveaux de l'arborescence (dans ce cas, les 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. Lorsque vous avez un "tableau" puis des "cellules de tableau" juste en dessous, elles sont implicitement interprétées comme siégeant 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;
}
54
Amin Ariana

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

16
John Carney

donner sur .view-type classe float:left; _ ou supprimez 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 de la table pour obtenir des résultats corrects.

1
Sotiris

Vous pouvez imbriquer table-cellule directement dans la table. Vous devez avoir une table. Commencer par table-row ne fonctionne pas. Essayez-le avec ce code 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>
0
rakensi