Affichage css: la première colonne tableau trop large

Question

J'ai une configuration de table css comme ceci:

<div class='table'>
 <div>
  <span>name</span>
  <span>details</span>
 </div>
</div>

Le css pour la table est:

.table{
 display:table;
 width:100%;
}
.table div{
 text-align:right;
 display:table-row;
 border-collapse: separate;
 border-spacing: 0px;
}
.table div span:first-child {
 text-align:right;
}
.table div span {
 vertical-align:top;
 text-align:left;
 display:table-cell;
 padding:2px 10px;
}

En l'état les deux colonnes sont répartis de manière égale entre l'espace occupé par la largeur de la table. J'essaie d'obtenir la première colonne seulement être aussi large que nécessaire par le texte occupant les cellules de it

La table est une largeur connue, comme le sont les colonnes / cellules.

Answer 1

Il suffit de lui donner une toute petite largeur comme 1px. Les cellules du tableau s'étend toujours à la plus petite taille possible d'adapter son contenu.

Answer 2

Essayez -> table-layout: fixed

Answer 3

Vous pouvez utiliser le sélecteur premier enfant à trouver la première div dans la table et lui donner une séparée avec.

.table div:first-child
{
    width:30%;
}

Answer 4

Je ne sais pas que vous pouvez l'obtenir à la taille du texte si différente par ligne, mais vous pouvez essayer de définir une largeur = « auto » ou une largeur de pourcentage pour les colonnes.

Answer 5

vous devez changer votre nom de classe « table » à un autre. « Table » suggèrent qu'il est classe une table que div.

essayez de suivre

<div class='table'>
 <div>
  <span style="width:30%">name</span>
  <span>details</span>
 </div>
</div>