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

Question

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

Demandé el 13 de Août, 2010: Quand la question a-t-elle été
51089 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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 le CSS suivant:

 .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 ceci sur JS Bin:

http://jsbin.com/ifiyo

Que se passe-t-il?

Demandé el 13 de Août, 2010 par chum of chance

Answer 1

5 Réponses

Answer 2

88voto

KP. Points 8241

Si vous utilisez display:table-row etc., ensuite, vous avez besoin d'un balisage adéquat, qui comprend un contenant de table. Sans cela votre question initiale, fondamentalement, fournit l'équivalent de mauvais balisage 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 simplement avoir une ligne de nulle part (tr doit être contenu dans table, thead, tbody, etc.)

Au lieu de cela, ajouter un élément externe avec display:table, mettre de la 100% de la largeur sur l'élément conteneur. Les deux à l'intérieur des cellules passera automatiquement à 50/50 et aligner le texte à droite sur la deuxième cellule. Oublier floats avec les éléments de la table. Il va sont la cause de nombreux 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;
}

Répondu el 13 de Août, 2010 par KP. (8241 Points )

Answer 3

54voto

Amin Ariana Points 1093

Testé réponse:

Dans l' .vue ligne de css, modifier:

display:table-row;

pour:

display:table

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

Comme il a été suggéré dans les commentaires, il n'est pas nécessaire pour une table d'enrubannage. Le CSS permet de l'omission d'un des niveaux de la structure de l'arbre (dans ce cas les lignes) qui sont implicites. La raison que votre code ne fonctionne pas, c'est que "largeur" ne peut être interprété au niveau de la table, non pas à la table-row. Lorsque vous avez un "tableau", puis "table-cell"s directement en dessous, ils sont implicitement interprété comme assis dans une rangée.

Exemple:

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

avec les css:

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

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

Répondu el 16 de Août, 2012 par Amin Ariana (1093 Points )

Answer 4

16voto

John Carney Points 175

Notez que, conformément à la spécification CSS3, vous n'avez PAS besoin d'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.

Répondu el 13 de Septembre, 2011 par John Carney (175 Points )

Answer 5

1voto

Sotiris Points 16807

donner sur .view-type classe 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 de la table pour obtenir des résultats corrects.

Répondu el 13 de Août, 2010 par Sotiris (16807 Points )

Answer 6

0voto

rakensi Points 369

Vous pouvez imbriquer table-cellule directement dans la table. Vous devez avoir une table. Démarrer une table-ligne 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>

Répondu el 31 de Octobre, 2011 par rakensi (369 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: