去除桌子和面板边缘之间的间隙

Question

我利用Bootstrap 3.2.0做了一个网站，我遇到了一个问题，就是在面板里面使用表格，我不知道该如何解决。

以这段代码为例。

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Title
                </div>
                <table class="table">
                    <thead>
                      <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Username</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>1</td>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                      </tr>
                      <tr>
                        <td>2</td>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                      </tr>
                      <tr>
                        <td>3</td>
                        <td>Larry</td>
                        <td>the Bird</td>
                        <td>@twitter</td>
                      </tr>
                    </tbody>
                  </table>
            </div>
        </div>
    </div>
</div>

我做了一个 样板戏 来演示相关行为。

如果您注意到，在表格的右侧，行边框和面板边框之间有一个轻微的间隙。在某些分辨率和缩放大小的组合下，这个空隙会消失，但在其他情况下，这个空隙是可见的。问题是面板的宽度通常是123.45px，而表格只有123px。由于它们都被设置为100%宽度，我不知道如何消除这个差距。

Answer 1

如果你在面板中添加 .pull-left 或 .pull-right 至 .panel-default 元素，这个问题消失了，但是又产生了一个新的问题......表格不再是响应式的了! http:/jsfiddle.netotjzhv0x

添加 style="width:100% 回到该元素中，问题就会返回。http:/jsfiddle.netL5w8y7zo。

我想你可能会被这部分像素偶尔失灵的情况所困扰。并不是说没有办法，但这并不容易。

Answer 2

Shawn的回答给了我一个想法，既然不能强行让表格稍微大一点来配合面板，那就把表格能展开的区域放大吧。

我做的是把桌子 里面 a panel-body然后我给它做了一些造型。

padding:0px;
margin-right:-1px;

这里是一个 抚弄 来证明。

这个想法是 panel-body 占据了整个面板的空间。然后把填充物去掉，这样桌子就占据了同样的空间。这时，右边还是会有偶尔的空隙。所以，通过增加 panel-body 1px，那么表格最多会扩大1px，表格边框会和面板边框相匹配，重叠不明显。如果表格稍微小一点，那多出来的1px就可以弥补了。

这远远不是一个合适的解决方案，我欢迎更好的答案。就目前而言，如果表格边框和面板边框的颜色不同，或者表格的背景色不同，这个方法是行不通的。