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?

Il ressemble text-align pourrait faire le travail mais je ne suis pas sûr que ce soit la solution, je veux aller avec.

OriginalL'auteur | 2013-11-22

  1. 12

    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.

    Faire Twitter Bootstrap Tableau de la colonne la plus à droite au ras du bord

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

    1. Réduire la colonne de prendre une plus petite quantité de l'espace, de sorte que le bouton s'affiche à embrasser le droit*:

      table tr td:last-child {
    white-space: nowrap;
    width: 1px;
}

    2. 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é.

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

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

    Faire Twitter Bootstrap Tableau de la colonne la plus à droite au ras du bord

    OriginalL'auteur KyleMit

  2. 9

    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

    agréable et propre, sans d'autres styles 🙂

    OriginalL'auteur MeyerRJ

  3. 4

    C'est juste la manière dont les tables de travail, ce que je voudrais faire est ceci:

    Donner à votre table un ID

    <table id="my_table">

    Préciser ceci:

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

    Fondamentalement compresser la dernière colonne autant que vous le pouvez, mais ne pas envelopper tout.

    OriginalL'auteur David Nguyen