html - 消除 table 和面板边缘之间的间隙

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>

我做了一个 sample fiddle演示相关行为。

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

Answer 1

如果将 .pull-left 或 .pull-right 添加到 .panel-default 元素，这个问题就会消失，但是创建一个新的...该表不再响应! http://jsfiddle.net/otjzhv0x/

将 style="width:100% 添加回该元素，问题返回:http://jsfiddle.net/L5w8y7zo/

我认为您可能会遇到像素的那部分偶尔会出现问题的情况。不是说没有办法做到，但这并不容易。