移除台面与面板边缘之间的间隙

Question

<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.net/otjzhv0x/

将style=“width：100%添加到该元素中，问题返回:http://jsfiddle.net/l5w8y7zo/

我想你可能会被一个像素的那部分偶尔不正常所困扰。不是说没有办法，但这并不容易。