Présenter des données tabulaires avec CSS, où les cellules trop larges ne gâchent rien

J'ai des lignes de données que je veux présenter dans des colonnes de taille fixe. Par exemple:Présenter des données tabulaires avec CSS, où les cellules trop larges ne gâchent rien

Name  City  Number 
Adam  Anaheim 714 555 5555 
Bob  Barstow 760 555 5555 
...  ...  ...

Toutefois, une des données de la colonne est parfois trop volumineuse pour s'adapter. Si cela se produit, je veux que cela affecte le moins de cellules voisines possible, et non la ligne entière si ce n'est pas le cas.

Voici ce que je FAIS besoin:

Name  City  Number 
Adam  Anaheim 714 555 5555 
Bob  Barstow 760 555 5555 
Constantine Canyon 805 555 5555 # Notice how phone number is still aligned :)

Voici ce que je NE PAS veulent:

Name  City  Number 
Adam  Anaheim 714 555 5555 
Bob  Barstow 760 555 5555 
Constantine Canyon  805 555 5555 # Notice how phone number is also shifted :(

Comment puis-je faire avec HTML/CSS (pas javascript s'il vous plaît) ?

Voici une jsbin avec une solution non-fonctionnelle, où vous pouvez jouer et voir par vous-même.

MISE À JOUR Voici un résumé de la réponse acceptée, lorsque vous avez des colonnes N:

Les premières colonnes N-1 doivent être enveloppé dans un style DIV = "display: inline-block" dont min- width est la largeur combinée des premières colonnes N-1. Puis à l'intérieur de ce DIV, les premières N-2 colonnes doivent être enveloppées dans un div similaire dont la largeur minimale est la largeur combinée des premières colonnes N-2. Continuez ce tout le long ...

Il est pas joli, mais cela fonctionne et est facile à gérer pour les petites N.

Source

2010-11-14 Dustin Boswell

Pouvez-vous poster votre balisage HTML en cours? –

J'ai essayé d'utiliser des DIVs à gauche avec une largeur minimale, mais cela n'a pas fonctionné. J'ai brièvement essayé une table de vanille, mais cela fait que toutes les colonnes se développent pour s'adapter aux plus grandes données. –

Si vous souhaitez aligner des données, les colonnes par définition ne doivent-elles pas croître pour s'adapter aux données les plus volumineuses? – deceze

Bonne question. Je ne pouvais pas trouver un moyen de le faire avec une table normale (en partie à cause des éléments de wrapper requis, en partie parce que IE ne se comporterait pas correctement) de sorte que la solution ci-dessous utilise divs.

Essayez ceci:

<!DOCTYPE html> 
<title>Test Case</title> 
<style type="text/css"> 
    body { font-size:11px; font-family: "Courier New"; } 
    * { margin:0; padding:0; } 

    .col, .span { display:inline-block; } 
    .col1 { min-width:12ex; } 
    .span2 { min-width:30ex; } 
    .span3 { min-width:40ex; } 

    /* IE6 */ 
    * html .col { display:inline; padding-right:1ex; } 
    * html .span { display:inline; white-space:nowrap; } 
    * html .col1 { width:12ex; } 
    * html .span2 { width:30ex; } 
    * html .span3 { width:40ex; } 

    /* IE7 */ 
    *:first-child+html .col { display:inline; padding-right:1ex; } 
    *:first-child+html .span { display:inline; } 
</style> 
<div class="table"> 
    <div class="row"> 
    <div class="span2 span"> 
     <div class="col1 col">Name</div> 
     <div class="col">City</div> 
    </div> 
    <div class="col">Number</div> 
    </div> 
    <div class="row"> 
    <div class="span2 span"> 
     <div class="col1 col">Adam</div> 
     <div class="col">Anaheim</div> 
    </div> 
    <div class="col">714 555 5555</div> 
    </div> 
    <div class="row"> 
    <div class="span2 span"> 
     <div class="col1 col">Bob</div> 
     <div class="col">Barstow</div> 
    </div>  
    <div class="col">760 555 5555</div> 
    </div> 
    <div class="row"> 
    <div class="span3 span"> 
     <div class="span2 span"> 
     <div class="col1 col">Constantine</div> 
     <div class="col">Canyon</div> 
     </div>   
     <div class="col">805 555 5555</div> 
    </div>   
    <div class="col"># Notice how phone number is still aligned :)</div> 
    </div> 
</div>

Il devrait être clair comment étendre cette idée à des colonnes supplémentaires en utilisant des enveloppes « span4 », « span5 », etc.

Source

2010-11-14 19:02:51 Alohci

Je vous suggère d'utiliser un div dans la td < td><div class="mydiv">your content</div></td>

Ensuite, vous donner en css .mydiv {overflow:auto;} et cela va ajouter des parchemins quand c'est nécessaire sans ruiner votre table. Edit - Je viens de voir que vous utilisez divs au lieu de table. Pourquoi ça?

Dans tous les cas, vous pouvez utiliser les propriétés display:table;display:table-row; et display:table-cell; pour représenter des données tabulaires.

Voici un exemple http://jsbin.com/evoka3/3

Source

2010-11-14 11:33:35 Sotiris

Je voudrais éviter les barres de défilement si possible. Et dans l'exemple que j'ai montré, il est (théoriquement) possible de présenter les données sans elles. –

Je ne pense pas que ce soit possible sans javascript et même sans barres de défilement. Peut-être qu'il y a une autre alternative que quelqu'un connaît. Pouvez-vous donner en exemple sur jsbin.com pour "jouer" avec? – Sotiris

Bonne idée - J'ai ajouté un lien jsbin à la fin de la question. –

Présenter des données tabulaires avec CSS, où les cellules trop larges ne gâchent rien

Répondre

Questions connexes