Bootstrap 3 - HTML表格与包装div之间存在1像素的右侧间隙

Question

我试图修复HTML，但无法确定表格与包装div之间的1像素右侧间隙是从哪里来的...

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

我认为，这可能是由于Bootstrap引擎的压迫性而导致的某种不可避免的缺陷。

这里是屏幕截图（放大区域）和相应的CSS，请注意间隙位于<table class="table">和<div class="panel-body">之间，而不是tr-td-thead-tbody和table之间。

（添加红色边框以更好地显示白色1像素间隙）

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

- monstro

---

你在使用 CSS reset 吗？ - floor

如果您检查面板表并查看框模型，是否没有填充或边距？ - floor

table::after 的样式是什么？ - Stickers

这是一个Bootstrap引擎，我在这里添加了另外2个截图来显示计算出的尺寸。 - monstro

Answer 1

我通过将父级 div 的 width: 100.1% 解决了这个问题，如下所示:

例如:

<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 页面上没有视觉差异。

- Nizam Kazi

Answer 2

这似乎是Chrome的渲染问题。为了比较，在Chrome中，这是Bootstrap 3面板与表格示例页面：而在最新的FireFox中，相同的示例缺少间隙：就此而言，这似乎是Bootstrap团队已知的问题：https://github.com/twbs/bootstrap/issues/11000并且已在Chrome错误跟踪器上进行了记录：https://code.google.com/p/chromium/issues/detail?id=306878。

- Graham Conzett

Answer 3

@Nizam 设置 table-wrapper 的百分比+0.1%并不能解决问题，因为它仍然会发生，取决于屏幕/表格大小。您可以通过更改 Chrome 窗口的大小来轻松尝试。

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

编辑：下面列出了一个在我的情况下有效的示例解决方案。我使用 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>

CSS：

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

- thex