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
Vous devez vous connecter pour publier un commentaire.
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.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
Essayez ->
table-layout: fixed
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
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.
OriginalL'auteur Rob
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
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
OriginalL'auteur Salil