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>

我想要它的样子的一个例子可以在这里找到：http://bootsnipp.com/snippets/featured/table-with-users

他们所做的是给最后一个元素一个固定的宽度,并以某种方式它的工作原理.有人可以解释这个或给我一个更好的解决方案吗？

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

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