Affichage CSS: la ligne de la table ne s’étend pas lorsque la largeur est définie sur 100%

Si vous utilisez display:table-row etc., vous avez besoin d’un balisage correct, qui inclut une table contenant. Sans elle, votre question initiale fournit essentiellement le mauvais marquage équivalent de:

  Type Name  

Où est la table ci-dessus? Vous ne pouvez pas simplement sortir une rangée de rien (il faut que ce soit dans une table , un thead , un tbody , etc.)

Ajoutez plutôt un élément externe avec display:table , placez la largeur de 100% sur l’élément contenant. Les deux cellules internes vont automatiquement aller 50/50 et aligner le texte directement sur la deuxième cellule. Oubliez les floats avec des éléments de table. Cela causera tant de maux de tête.

balisage:

 
 
 
Type
 
Name
 
  

CSS:

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

Testé réponse:

Dans le fichier .view-row, modifiez:

 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’ya pas besoin de tableau d’emballage. CSS permet d’omettre les niveaux implicites de l’arborescence (dans ce cas, les lignes). La raison pour laquelle votre code ne fonctionne pas est que “width” ne peut être interprété qu’au niveau de la table, pas au niveau des lignes de la table. Lorsque vous avez une “table” puis une “table-cellule” directement en dessous, elles sont implicitement interprétées comme étant alignées.

Exemple de travail:

 
 
Type
 
Name
  

avec css:

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

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

donner sur la classe .view-type float:left; ou supprimer le float:right; de .view-name

edit: Enveloppez votre div

avec un autre div par exemple

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.

Vous pouvez imbriquer une cellule de table directement dans la table. Vous devez avoir une table. Le démarrage de chaque table ne fonctionne pas. Essayez-le avec ce HTML:

      
 
 
 X 
 
 X 
 
 X 
 
 
 
 
 X 
 
 X 
 
 X 
 
 
 
 X 
 
 X 
 
 X