Rendez la colonne la plus à droite de la colonne Bootstrap de Twitter contre le bord

J'utilise Twitter-Bootstrap (3.0) pour concevoir un site Web de projet pour l'école, nous faisons un clone de risque en ligne, avec des virages indépendants comme Words With Friends. J'utilise un tableau HTML pour afficher la liste des jeux en cours du joueur et je voudrais faire en sorte que la colonne la plus à droite soit alignée contre le bord et n'ait pas beaucoup d'espace blanc supplémentaire.

Voici ma table fictive:

<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>

An example of what I want it to look like can be found here: http://bootsnipp.com/snippets/featured/table-with-users

Ce qu'ils ont fait est de donner au dernier élément une largeur fixe et d'une manière ou d'une autre cela fonctionne. Est-ce que quelqu'un peut expliquer cela ou me donner une meilleure solution?

4

3 Réponses

Le problème est que la dernière colonne (qui est droite alignée) occupe plus d'espace que le bouton (qui est à gauche ) aligné) besoins.

column

Pour résoudre ce problème, vous pouvez effectuer l'une des opérations suivantes:

  1. Shrink the column to take up a smaller amount of space, so the button appears to hug the right*:

    table tr td:last-child {
        white-space: nowrap;
        width: 1px;
    }
    
  2. Right align the content of the last row so the button aligns to the right size of all the space it is allotted.

    table tr td:last-child {
        text-align: right;
    }
    

*Note: The sample went with the first option by applying an inline style to the last header, effectively setting the width for the whole column with <th style="width: 36px;"></th>

Démonstration de travail dans jsFiddle

Ce qui ressemblera à ceci:

demo

10
ajouté

En utilisant le framework Bootstrap, vous pouvez simplement ajouter la classe text-right à la dernière cellule td. http://getbootstrap.com/css/#type-emphasis (faites défiler vers le bas pour accéder aux classes d'alignement)

If you want to make your buttons smaller, look into the button sizing classes: btn-sm or btn-xs http://getbootstrap.com/css/#buttons-sizes

9
ajouté
agréable et propre sans styles supplémentaires :)
ajouté l'auteur kovpack, source

C'est juste comment les tableaux fonctionnent, ce que je ferais est ceci:

Donnez une ID à votre table

<table id="my_table">

Specify this:

#my_table tbody tr td:last-child {
    white-space: nowrap;
    width: 1%
}

Basically compress the last column as much as you can but do not wrap anything.

4
ajouté