为什么 Firefox 在某些 HTML 表格上缺少边框

Why is Firefox missing the border on some HTML tables

提问by leora

I am using Firefox 3.5.7 and I have the same CSS used in multiple HTML tables, but there are some examples where parts of the borders are not shown.

我使用的是 Firefox 3.5.7 并且我在多个 HTML 表格中使用了相同的 CSS，但是有一些示例中未显示部分边框。

What makes no sense to me is that the same CSS on the same page for another HTML table works fine. Also, the same page in Internet Explorer looks fine from a border point of view.

对我来说毫无意义的是，对于另一个 HTML 表格，同一页面上的相同 CSS 可以正常工作。此外，从边界的角度来看，Internet Explorer 中的同一页面看起来不错。

Here is an image with an example, as you can see in this case the bottom of the first table is missing a border.

这是带有示例的图像，您可以在这种情况下看到第一个表格的底部缺少边框。

Does anyone have a clue why this would happen here?

有谁知道为什么会在这里发生这种情况？

回答by BalusC

Maybe you've zoomed in/out a bit. This can happen either accidently or knowingly when you do Ctrl+Scrollwheel. Maybe it isn't completely resetted to zoom level zero. This mis-rendering behaviour is then recognizeable at some websites, also here at SO.

也许你已经放大/缩小了一点。当您执行Ctrl+Scrollwheel 操作时，这可能会意外或有意地发生。也许它没有完全重置为零缩放级别。这种错误渲染行为在某些网站上是可以识别的，也在 SO 上。

To fix this, just hit Ctrl+0or do View> Zoom> Resetto reset the zoom level to default.

要解决此问题，只需点击Ctrl+0或执行View> Zoom> Reset将缩放级别重置为默认值。

This is Firefox/Gecko bug 410959. This affects tables with border-collapse:collapse. It's from 2008 and there's no real progress on it, so you'll probably need to find a workaround. One way is using border-collapse:separateand fiddling with borders on a per-cell basis.

这是 Firefox/Gecko 错误410959。这会影响带有border-collapse:collapse. 它是从 2008 年开始的，并且没有真正的进展，因此您可能需要找到解决方法。一种方法是border-collapse:separate在每个单元格的基础上使用和摆弄边界。

回答by GregL

I found a similar problem when zoomed out in Firefox on an application I am working on.

在 Firefox 中缩小我正在处理的应用程序时，我发现了类似的问题。

The main cause was having the CSS border-collapseproperty set to collapse.

主要原因是将 CSSborder-collapse属性设置为collapse.

Changing it to separateinstead fixed the problem. However, that meant I did have to rethink the way borders are applied to various parts of the table, because otherwise your borders will appear to double in thickness. I ended up having to use jQuery to give a special "last" class to the last tdor thin each tr, and to the last trin the table. My query was something like:

将其更改为separate解决了问题。但是，这意味着我确实必须重新考虑将边框应用于表格各个部分的方式，否则您的边框的厚度会增加一倍。我最终不得不使用 jQuery 为最后一个td或th每个中以及表中tr的最后一个提供一个特殊的“最后”类tr。我的查询是这样的：

$('table tr > th:last-child, table > tbody > tr > td:last-child, table > tbody > tr:last-child').addClass('last');

My CSS rules were similar that:

我的 CSS 规则类似于：

table
{
    border-collapse: separate !important;
}

table tr, table th, table td
{
    border-right-width: 0;
    border-bottom-width: 0;
    border-left: 1px solid black;
    border-top: 1px solid black;
}

table td.last, table th.last 
{
    border-right: 1px solid black;
}

table tr.last td
{
    border-bottom: 1px solid black;
}

table
{
    border: 0;
}

I did end up using browser targeting so that I only applied these rules to Firefox users, but it may work for all browsers, I haven't tested.

我最终确实使用了浏览器定位，因此我只将这些规则应用于 Firefox 用户，但它可能适用于所有浏览器，我还没有测试过。

回答by Donald Payne

Building on the good answer of @GregL (I seem unable to "comment" directly on it): Instead of using JQuery to generate a "last" class, I simply used the built-in pseudo-element selector :first-child. I built rules selecting tr:first-childand td:first-childthat define border-topand border-left(instead of border-rightand border-bottomas in GregL's answer). The generic rules define border-rightand border-bottominstead of border-leftand border-top. :first-childis said to be supportedin Chrome v. 4.0, Firefox v. 3.0, IE 7.0, Safari v. 3.1, and Opera v. 9.6 (). Tested on Firefox v. 40.0.3, where I saw this problem in the first place.

基于@GregL 的好答案（我似乎无法直接对其进行“评论”）：我没有使用 JQuery 生成“最后一个”类，而是使用了内置的伪元素选择器:first-child。我内置的规则选择tr:first-child和td:first-child定义border-top和border-left（而不是border-right和border-bottom在GregL的答案）。通用规则定义border-rightandborder-bottom而不是border-leftand border-top。:first-child被说成被支撑在Chrome诉4.0，火狐诉3.0，IE 7.0，Safari浏览器诉3.1和Opera诉9.6（）。在 Firefox v. 40.0.3 上测试，我首先看到了这个问题。

回答by Tom

This was caused by the table (with a missing bottom-border) to be inside a div...The border apparently didn't get calculated in the table height, so the border was there but wasn't shown.

这是由表格（缺少底部边框）在 div 内引起的...边框显然没有在表格高度中计算，所以边框在那里但没有显示。

Giving the surrounding div a margin-bottom from 1px solved the problem.

给周围的 div 一个 1px 的边距底部解决了这个问题。

回答by Varun Arora

Just use border-spacing:0;hope this will solve your problem.

只是使用border-spacing:0;希望这会解决您的问题。

回答by Jerome Anthony

Border started going missing when browser zoom was increased. I was able to solve it by doing the following. Tested in Chrome and Firefox.

当浏览器缩放增加时，边框开始丢失。我能够通过执行以下操作来解决它。在 Chrome 和 Firefox 中测试。

padding: 0.5px !important

回答by vanrado

I had the same problem with missing table border. My solution is:

我有同样的问题，缺少表格边框。我的解决办法是：

table{
  border-collapse: collapse !important;
  border-spacing: 0px;
  border: 1px solid #DDD;
}

And border for table rows:

和表格行的边框：

table tr{
  border-bottom: 1px solid #DDD !important;
}

I am using Bootstrap either in my layout and the table has also bootstrap css classes like "table table-striped table-bordered"

我在我的布局中使用 Bootstrap 并且表格也有引导 css 类，如“table table-striped table-bordered”

This solution works for me, when I tried solution with

当我尝试解决方案时，此解决方案对我有用

border-collapse: separate !important;

it didn't work properly for me.

它不适合我。

回答by Дмитрий Сальников

worked for me realisation of answer @Donald Payne

为我工作了答案@Donald Payne

*( .table - bootstrap class )

*( .table - 引导类)

table.table {
    border-collapse: separate !important;
}

table.table tr,
table.table th,
table.table td {
    border-right-width: 0 !important;
    border-bottom-width: 0 !important;
    border-left: 1px solid #DDD !important;
    border-top: 1px solid #DDD !important;
}

table.table td:last-child,
table.table th:last-child {
    border-right: 1px solid #DDD !important;
}

table.table tr:last-child td {
    border-bottom: 1px solid #DDD !important;
}

table.table {
    border: 0 !important;
}

table.table thead tr:last-child th,
table.table thead tr:last-child td {
  border-bottom: 1px solid #DDD !important;
}

table.table tbody tr:first-child th,
table.table tbody tr:first-child td {
  border-top-width: 0 !important;
}

回答by William Turrell

This is a bit tangential, but for those searching for missing borders in Firefox…

这有点无关紧要，但对于那些在 Firefox 中寻找缺失边框的人来说……

I had a border-bottom of a table-row (<tr>) that was missing where a background had been set on a specific cell. It turned out this was caused by a rogue position: relativeon the cell, removing that (or changing it to position: inherit) fixed it.

我有一个表格行（<tr>）的边框底部，在特定单元格上设置了背景的地方丢失了。原来这是由position: relative单元格上的一个流氓引起的，删除它（或将其更改为position: inherit）修复了它。

Firefox 70.0.1

火狐 70.0.1