twitter-bootstrap - 使 Twitter Bootstrap Table 最右边的列与边缘齐平

Question

我正在使用 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

他们所做的是给最后一个元素一个固定的宽度，并且它以某种方式起作用。有人可以解释一下或给我一个更好的解决方案吗？

Answer 1

问题是最后一列( 右 对齐)占用的空间比其中的按钮( 左 对齐)需要更多的空间。



要解决此问题，您可以执行以下任一操作:

缩小列以占用较小的空间，因此按钮似乎紧靠右侧*:

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

右对齐最后一行的内容，使按钮与分配的所有空间的大小对齐。

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

*注 : 该示例使用第一个选项，将内联样式应用于最后一个标题，有效地使用 <th style="width: 36px;"></th> 设置整列的宽度

Working Demo in jsFiddle

看起来像这样: