4 votes

alignement des tableaux twitter bootstrap

J'utilise twitter bootstrap et j'essaie d'aligner deux tableaux. Je commence à penser que je m'y prends de la mauvaise façon. J'ai deux tableaux, un avec 3 colonnes et un avec 2 colonnes. J'ai réglé le tableau à 3 colonnes sur span6, span2, span4. J'ai réglé la table à 2 colonnes sur span6 et span6. Ils ne semblent pas toujours s'aligner au milieu en fonction de la largeur de la page. Existe-t-il un moyen d'y parvenir ?

Ejemplo: http://jsfiddle.net/PSBtr/

<html>
<head><link href="stackoverflow.com//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, j'essaie de concevoir une mise en page quelque peu fluide qui comporte également des tableaux qui s'étendent mais ont une taille minimale. Toute suggestion supplémentaire sur la mise en page (de bootstrap) qui pourrait accomplir ceci serait également utile.

Merci !

1voto

Rishi Kalia Points 2774

Le code ci-dessous accomplira ce que vous essayez d'obtenir :

 <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 est difficile de répondre car cela dépend des besoins exacts, mais oui, vous pouvez essayer une colonne unique. Une mise en page fluide Dans le cas où les utilisateurs navigueraient sur des écrans de taille réduite, vous devez envisager une solution de type Conception réactive ..

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X