twitter bootstrap alignement de table

J'utilise Twitter bootstrap et j'essaie d'aligner deux tables. Je commence à penser que je vais dans le mauvais sens. J'ai deux tables une avec 3 colonnes et une avec 2 colonnes. J'ai mis la table de 3 colonnes à span6, span2, span4. J'ai mis la table de 2 colonnes à span6 et span6. Ils ne semblent pas toujours aligner au milieu en fonction de la largeur de la page. Y a-t-il un moyen d'accomplir cela?twitter bootstrap alignement de table

Exemple: http://jsfiddle.net/PSBtr/

<html> 
<head><link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"></head> 

    <body> 

    <table class="table table-bordered table-condensed"> 
    <thead> 
    <tr> 
     <th class="span6">fdsafdfdf f dfdafs sd</th> 
     <th class="span2">tesaaat</th> 
     <th class="span4">ffdsfsd d</th>      
    </tr> 
</thead> 

</table> 

<table class="table table-bordered table-condensed"> 
<thead> 
<tr> 
    <th class="span6" >fdfdf fds f </th> 
    <th class="span6">test</th> 
</tr> 
</thead> 

</table> 

</body> 
</html>

En fin de compte, je suis en train de concevoir une mise en page un peu fluide qui a aussi des tables qui permettront d'élargir, mais ont une taille minimale. Toute suggestion supplémentaire sur la mise en page (par bootstrap) pourrait également être utile.

Merci!

Source

2012-11-19 turbo2oh

Ci-dessous le code accomplira ce que vous essayez d'atteindre:

<table class="table table-bordered table-condensed"> 
    <thead> 
    <tr class="span12"> 
     <th class="span6">fdsafdfdf f dfdafs sd</th> 
     <th class="span2">tesaaat</th> 
     <th class="span4">ffdsfsd d</th> 
    </tr> 
</thead> 

</table> 

<table class="table table-bordered table-condensed"> 
<thead> 
<tr class="span12"> 
    <th class="span6">fdfdf fds f </th> 
    <th class="span6">test</th> 
</tr> 
</thead> 

</table>

Pour la dernière partie de votre question, il serait difficile de dire que cela dépend de requierments exact mais oui, vous pouvez essayer un seul colonne Fluid layout .. Dans le cas où les utilisateurs parcourraient les tailles d'écran compact alors vous devez envisager un Responsive design ..

Source

2012-11-20 10:05:44

certainement mieux, savez-vous pourquoi les deux versions de tables ici ne sont pas identiques? http://jsfiddle.net/PSBtr/ – turbo2oh

Je ne suis pas sûr maintenant pourquoi ils ne sont pas identiques .. vous pouvez vérifier [ce violon] (http://jsfiddle.net/hUAHB/), si cela aide .. –

twitter bootstrap alignement de table

Répondre

Questions connexes