css display:table à la première colonne, trop large

J'ai un css table de configuration comme ceci:

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

Le css de 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;
}

Tel qu'il est, les deux colonnes sont répartis à part égale entre l'espace occupé par la largeur de la table. Je vais essayer d'obtenir la première colonne uniquement pour être la plus large est nécessaire par le texte qui l'occupent les cellules de

La table est un inconnu de la largeur, comme le sont les colonnes/cellules.

border-collapse et border-spacing s'appliquent uniquement aux tables de lignes de la table. Vous devez les déplacer vers la .table règle. NB: une raison particulière vous ne sont pas réellement à l'aide d'un tableau?
Pas à l'aide d'un tableau html, parce que le code existe sur l'ensemble du site et est généré grâce à ajax. J'ai juste gardé les choses simples parce que l'ajax et php est sans rapport avec la question.
Mais sûrement générer des divs imbriqués et s'étend sur n'est pas différent de la génération d'une table avec trs et tds? Comment est-ce que (et de traiter avec ces CSS table des questions) est plus facile que juste de la sortie d'une table via AJAX?
C'est surtout pour le "thème" des raisons, le site que je suis en train de travailler sur est personnalisable par l'utilisateur thèmes. les tables de trs et tds aurait besoin d'une mise à jour sur les thèmes de code qui est assez vaste. Plus (bien que je puisse être erronée, le css n'est pas quelque chose que je suis très bon avec encore), il pourrait gâcher l'héritage de la divs imbriqués et s'étend. À ce stade, il semble plus facile de faire de cette façon.

OriginalL'auteur Mestore | 2010-04-27

  1. 11

    Juste lui donner une toute petite largeur comme 1px. Les cellules du tableau augmente toujours à la plus petite taille possible pour s'adapter à son contenu.

    Cela a été essayé déjà, il fait la largeur aussi large que le mot le plus long. Si la cellule a 3-5 mots, le navigateur va envelopper autant que possible de garder les cellules aussi étroite que possible.
    essayez d'ajouter de l'espace="nowrap"
    Ensuite, vous devez également ajouter white-space: nowrap pour arrêter l'emballage.
    Ne savent pas à propos de white-space: nowrap; le problème est résolu. Merci
    J'ai eu le même problème avec une seule colonne au milieu de ma table, mais grâce aux conseils ici, le problème est résolu. < td style='width:1px;white-space:nowrap" >

    OriginalL'auteur RoToRa

  2. 16

    Essayez -> table-layout: fixed

    Vous la légende. Cela a réglé le problème que j'ai avec les cellules de sortir de conteneurs.
    Une bouée de sauvetage! Merci!
    Où en êtes-vous de mettre?
    Ceci va dans le .table et il fait toutes les colonnes de la table de une un uniforme de largeur avec les autres colonnes.

    OriginalL'auteur Fortisimo

  3. 2

    Vous pouvez utiliser le premier sélecteur d'enfant de trouver le premier div à l'intérieur de la table et de lui donner une autre avec.

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

    OriginalL'auteur Rob

  4. 1

    Je ne sais pas si vous pouvez l'obtenir à la taille du texte si cela diffère en ligne, mais vous pouvez essayer de définir une width ="auto" ou un pourcentage de la largeur des colonnes.

    OriginalL'auteur Steve Robillard

  5. -1

    vous devriez changer votre nom de classe "de la table" pour certains autres. "table" suggèrent que c'est la classe de la table, de div.

    essayez de suivre 

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

    OriginalL'auteur Salil