Почему Firefox пропускает границу на некоторых таблицах HTML

Ответ 1

Возможно, вы немного увеличили/уменьшили. Это может произойти либо случайно, либо сознательно, когда вы делаете Ctrl + Scrollwheel. Возможно, он не полностью перезагружен, чтобы увеличить нулевой уровень. Это ошибочное поведение затем распознается на некоторых веб-сайтах, также здесь, в SO.

Чтобы исправить это, просто нажмите Ctrl + 0 или сделайте View > Zoom > Reset to Reset уровень масштабирования по умолчанию.

Это ошибка Firefox/Gecko 410959. Это влияет на таблицы с border-collapse:collapse. Это с 2008 года, и нет реального прогресса в этом, поэтому вам, вероятно, придется найти обходное решение. Один из способов заключается в использовании border-collapse:separate и возиться с границами на основе каждой ячейки.

Ответ 2

Я нашел аналогичную проблему при увеличении в Firefox в приложении, над которым я работаю.

Основная причина заключалась в том, что свойство CSS border-collapse установлено на collapse.

Вместо этого изменилась его на separate. Однако это означало, что мне пришлось переосмыслить, как границы применяются к различным частям таблицы, потому что в противном случае ваши границы будут удваиваться по толщине. Мне пришлось использовать jQuery, чтобы дать специальный "последний" класс последним td или th в каждом tr и до последнего tr в таблице. Мой запрос был примерно таким:

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

Мои правила 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;
}

В конечном итоге я использовал браузерный таргетинг, чтобы применить эти правила только к пользователям Firefox, но он может работать для всех браузеров, я не тестировал.

Ответ 3

Основываясь на хорошем ответе @GregL (я, похоже, не могу "прокомментировать" прямо на нем): Вместо использования JQuery для генерации "последнего" класса я просто использовал встроенный селектор псевдоэлементов :first-child. Я построил правила, выбрав tr:first-child и td:first-child, которые определяют border-top и border-left (вместо border-right и border-bottom как в ответе GregL). Общие правила определяют border-right и border-bottom вместо border-left и border-top. :first-child сказал, что поддерживается в Chrome v. 4.0, Firefox v. 3.0, IE 7.0, Safari v. 3.1 и Opera v. 9.6(). Протестировано на Firefox v. 40.0.3, где я увидел эту проблему в первую очередь.

Ответ 4

Это вызвано тем, что таблица (с отсутствующей нижней границей) находится внутри div... Граница, по-видимому, не вычислялась в таблице высоты, поэтому граница была там, но не была показана.

Предоставляя окружающему div, край от 1px решил проблему.

Ответ 5

У меня была та же проблема с отсутствующей границей таблицы. Мое решение:

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

И граница для строк таблицы:

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

Я использую Bootstrap либо в своем макете, и в таблице также есть классы bootstrap css, такие как "table table-striped table-bordered"

Это решение работает для меня, когда я пробовал решение с помощью

border-collapse: separate !important;

для меня это не сработало.

Ответ 6

Просто используйте border-spacing:0; надеемся, что это решит вашу проблему.

Ответ 7

Граница начала пропадать, когда увеличен масштаб браузера. Я смог решить это, выполнив следующее. Протестировано в Chrome и Firefox.

padding: 0.5px !important

Ответ 8

работал у меня на реализацию ответа @Donald Payne

* (.table - bootstrap class)

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