引导程序3-HTML表和包装div之间有1px的右侧间隙

试图修复html，无法找出表和包装div之间的1px右侧间隙来自

• 忘了提到，我正在使用引导

我相信，这可能是某种不可避免的缺陷，来自于引导引擎的压迫性

这是屏幕截图（带缩放区域）和相应的css，请注意间隙在

和

之间，而不是在tr td thead tbody和表格之间

（增加了红色边框，以便更好地看到白色1px间隙）

在这里，我为包装div“panel body”和表添加了计算样式，因为它是一个引导引擎，响应迅速，大小是动态计算的

---

这似乎是Chrome的渲染问题。为了进行比较，以下是Bootstrap 3面板，其中包含Chrome中的表格示例页面：

在最新的FireFox中也出现了同样的例子，缺少了一个缺口：

对于Bootstrap团队来说，这似乎是一个众所周知的问题：

并已在Chrome bug追踪器上存档：

---

我通过将

宽度：100.1%

给

表的父
div
解决了这个问题

例如

<div class="col-md-7">
<div class="table-wrapper">
<table class="table>
<tr><td></td></tr>
</table>
</div>
</div>

我不确定这个解决方案是否能解决你的问题，但我相信它会帮助别人

注意：我使用的是Bootstrap 3.3。并提供额外的.1%宽度不会在html页面上产生视觉差异。
@Nizam将表包装的百分比设置为+0.1%并不能解决此问题，因为根据屏幕/表大小，仍然会出现此问题。您可以通过更改chrome窗口的大小轻松地进行尝试

我注意到，表包装器的全宽度将起作用，并防止表出现1px错误。否则，固定宽度也可以解决问题。我知道这可能不是一个令人满意的解决方案，但我没有找到更好的解决方法（不是在bootstrap git上，也不是在chrome的bug报告注释上）

编辑：下面列出了在我的案例中有效的示例解决方案。我用css将容器的大小固定在更高的分辨率上，css“覆盖”了我以前使用的col-lg-8

HTML:

<div class="col-lg-f1 col-xs-12">
    <div class="panel panel-primary">
        <div class="panel-heading">
        ...
        </div>
        <table id="city_table" name="test_table" class="table table-hover" >
            <thead>
            ...
            </thead>
            <tbody>
            ....
            </tbody> 
        </table>
    </div>
</div>

@media (min-width: 1200px) {
    .col-lg-f1 {
        width: 900px;
    }       
}   

你在使用css重置吗？如果你检查面板表格并查看盒子模型，是否没有填充或magin？表格的样式是什么：：after？这是一个引导引擎，我在这里为计算大小添加了两个屏幕截图
@media (min-width: 1200px) {
    .col-lg-f1 {
        width: 900px;
    }       
}