使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

问题是最后一列(右对齐)比它内部的按钮(左对齐)需要更多的空间.

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

1. 缩小列占据较小的空间,因此按钮似乎拥抱正确的*:

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

2. 右对齐最后一行的内容,使按钮与所分配的所有空间的正确大小对齐.

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

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

在jsFiddle工作演示

这将是这样的:

Answer 2

使用Bootstrap框架,您只需将文本右侧类添加到最后一个td单元格即可. http://getbootstrap.com/css/#type-emphasis(向下滚动到Alignment类)

如果你想让你的按钮更小,请查看按钮大小调整类:btn-sm或btn-xs http://getbootstrap.com/css/#buttons-sizes

Answer 3

这就是表格的工作方式，我会做的是：

给你的桌子一个 ID

<table id="my_table">

指定：

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

基本上尽可能多地压缩最后一列，但不要包装任何东西。