Working Demo in jsFiddle

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

问题是最后一列（正确对齐）比中的按钮占用更多空间（左< / strong>对齐）需要。

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

缩小列占据较小的空间，因此按钮似乎拥抱右侧*：

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

这将是这样的：

Answer 2

使用Bootstrap框架，您只需将 text-right 类添加到最后一个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%
}

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

使Twitter Bootstrap Table的最右边的列冲洗边缘

3 个答案:

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

Working Demo in jsFiddle