twitter-bootstrap – 使Twitter Bootstrap Table的最右边的列冲洗边缘

我正在使用Twitter-Bootstrap(3.0)为学校设计一个项目网站,我们正在制作一个在线风险克隆,并且像Words With Friends一样独立转变.我使用 HTML表来显示玩家当前游戏的列表,我想这样做,因此最右边的列与边缘齐平并且没有太多额外的空白区域.

这是我的虚拟表：

<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>@H_674_10@ 
 
我想要它的样子的一个例子可以在这里找到：http://bootsnipp.com/snippets/featured/table-with-users
 
 
他们所做的是给最后一个元素一个固定的宽度,并以某种方式它的工作原理.有人可以解释这个或给我一个更好的解决方案吗？

table tr td:last-child {
    white-space: Nowrap;
    width: 1px;
}@H_674_10@ 
 
>右对齐最后一行的内容,使按钮与所分配的所有空间的正确大小对齐.
 
 
 
 
table tr td:last-child {
    text-align: right;
}@H_674_10@ 
 
*注意：样本通过将内联样式应用于最后一个标题来使用第一个选项,有效地使用< th style =“width：36px;”>< / th>设置整个列的宽度.
 
 
Working Demo in jsFiddle
 
 
这将是这样的：