Bootstrap 3 - 1px HTML表和包装div之间的正确差距

Question

尝试修复html，无法弄清楚表和包装div之间的这个1px正确的差距是来自......

• 忘了提，我正在使用Bootstrap。

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

以下是屏幕截图（带有缩放区域）和相应的css，请注意差距介于<table class="table">和<div class="panel-body">之间，而不是介于tr-td-thead-tbody和table之间。

（添加红色边框以更好地查看白色1px间隙）

这里我要为两者添加计算样式 - 包装div“panel-body”和表，因为它是一个Bootstrap引擎，响应，大小是动态计算的。

Answer 1

我通过将width: 100.1%提供给div的父table来解决了这个问题。

例如

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

这个HTML结构我写在CSS下面：

.table-wrapper{
    width: 100.1%;
}
table.table{
    width: 100%;
}

我不确定此解决方案是否会解决您的问题，但我相信它会对某人有所帮助。

注意：我使用的是Bootstrap 3.3。 并且提供额外的 .1％宽度不会在html页面上产生视觉差异。

Answer 2

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

和最新的FireFox中的相同示例，错过了差距：

对于它的价值而言似乎是Bootstrap团队的一个已知问题：https://github.com/twbs/bootstrap/issues/11000

已在Chrome错误跟踪器上提交： https://code.google.com/p/chromium/issues/detail?id=306878

Answer 3

@Nizam设置table-wrapper的百分比+ 0.1％并不能解决问题，因为取决于screen / tablesize，它仍然会出现。您可以通过更改chrome窗口的大小轻松尝试它。

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

编辑：下面列出了我的案例中有效的示例解决方案。我用更高的分辨率修改了容器的大小，用css覆盖＆＃34;覆盖＆＃34;我之前使用的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>

<强> CSS：

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