Faire Twitter Bootstrap Tableau de la colonne la plus à droite au ras du bord
Je suis en utilisant Twitter Bootstrap (3.0) pour la conception d'un site web du projet pour l'école, nous allons mettre en ligne un Risque clone, indépendants des virages comme des Mots Avec des Amis. J'utilise un tableau HTML pour afficher la liste des joueurs de jeux et je voudrais faire en sorte que la colonne la plus à droite est au ras du bord et n'ont pas beaucoup d'espace blanc supplémentaire.
Voici ma table factice:
<table class = "table table-hover">
<thead>
<tr>
<th> Game ID </th>
<th> Status </th>
<th> Players </th>
<th> Turn </th>
<th> Last Turn </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> IN PROGRESS </td>
<td> 4/4 </td>
<td> tedbeem </td>
<td> 11/12/13 6:30 PM </td>
<td> <button class = "btn btn-primary"> View </button> </td>
</tr>
<tr>
<td> 2 </td>
<td> RECRUITING </td>
<td> 4/5 </td>
<td> N/A </td>
<td> 11/12/13 3:10 PM </td>
<td> <button class = "btn btn-primary"> View </button> </td>
</tr>
<tr>
<td> 13 </td>
<td> IN PROGRESS </td>
<td> 3/3 </td>
<td> D-Halt-on </td>
<td> 11/12/13 9:00 AM </td>
<td> <button class = "btn btn-primary"> View </button> </td>
</tr>
</tbody>
</table>
Un exemple de ce que je veux qu'il ressemble peut être trouvé ici: http://bootsnipp.com/snippets/featured/table-with-users
Ce qu'ils ont fait, c'est de donner le dernier élément d'une largeur fixe et pourtant, il fonctionne. Quelqu'un peut m'expliquer ce ou de donner mon une meilleure solution?
OriginalL'auteur | 2013-11-22
Vous devez vous connecter pour publier un commentaire.
Le problème est que la dernière colonne (qui est droit aligné) prend plus de place que le bouton à l'intérieur il (qui est gauche aligné) besoins.
Pour résoudre ce problème, vous pouvez effectuer une des opérations suivantes:
Réduire la colonne de prendre une plus petite quantité de l'espace, de sorte que le bouton s'affiche à embrasser le droit*:
Aligner à droite le contenu de la dernière ligne de sorte que le bouton s'aligne sur le droit de la taille de tout l'espace est alloué.
*Note: L'échantillon est allé avec la première option, par l'application d'un style en ligne pour la dernière de l'en-tête, effectivement réglage de la largeur de l'ensemble de la colonne avec
<th style="width: 36px;"></th>
Travail de Démonstration dans jsFiddle
Qui ressemblera à ceci:
OriginalL'auteur KyleMit
En utilisant le Bootstrap framework, vous pouvez simplement ajouter le texte-droit classe à la dernière td cellule.
http://getbootstrap.com/css/#type-emphasis (Faites défiler jusqu'à l'Alignement des classes)
Si vous voulez faire de votre boutons plus petits, se pencher sur le bouton de dimensionnement des classes: btn-sm ou btn-xs
http://getbootstrap.com/css/#buttons-sizes
OriginalL'auteur MeyerRJ
C'est juste la manière dont les tables de travail, ce que je voudrais faire est ceci:
Donner à votre table un ID
Préciser ceci:
Fondamentalement compresser la dernière colonne autant que vous le pouvez, mais ne pas envelopper tout.
OriginalL'auteur David Nguyen