Bootstrap 3 - HTML表格和包装div之间的1px右侧间隙答案

【问题标题】：Bootstrap 3 - 1px right gap between HTML table and wrapping divBootstrap 3 - HTML表格和包装div之间的1px右侧间隙
【发布时间】：2015-05-17 20:22:18
【问题描述】：

试图修复 html，但无法确定表格和包装 div 之间 1px 的右侧间隙来自...

忘了说，我用的是 Bootstrap。

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

这里是截图（带缩放区域）和对应的css，请注意差距在<table class="table">和<div class="panel-body">之间，而不是在tr-td-thead-tbody和table之间。

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

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

【问题讨论】：

你在使用css重置吗？
如果您检查面板表并查看盒子模型，是否没有填充或尺寸？
table::after 的样式是什么？
它是一个 Bootstrap 引擎，在这里我添加了 2 个计算尺寸的屏幕截图

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

@Nizam 设置表格包装器的百分比 +0.1% 并不能解决问题，因为根据屏幕/表格大小，它仍然会发生。您可以通过更改 chrome 窗口的大小轻松尝试。

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

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

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;
    }       
}

【讨论】：

【解决方案2】：

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

例如

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

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

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

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

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

【讨论】：

【解决方案3】：

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

和最新的 FireFox 中的相同示例，缺少差距：

对于 Bootstrap 团队来说，这似乎是一个已知问题：https://github.com/twbs/bootstrap/issues/11000

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

【讨论】：