Отсутствующие границы таблицы в Firefox - PullRequest
2 голосов
/ 22 марта 2012

У меня есть таблица с данными, и при просмотре в Firefox некоторые границы не отображаются.Пожалуйста, смотрите прикрепленный скриншот.

Этого не происходит ни в одном другом браузере.Протестировано в Firefox, IE, Safari и Chrome.

Есть идеи, почему и как это исправить?

Я использую стили для форматирования таблицы:

.myTbl {
  border: 2px solid #cccccc;
  border-collapse: collapse;
}

.myTbl th, .myTbl td {
  white-space: nowrap;
  border-right: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 2px;
}

.myTbl td {
  text-align: center;
  width: 15%;
}

.myTbl tr:hover td {
  background-color: #ffffcc;
}

.myTbl thead th, .myTbl thead:hover th {
  text-align: center;
  font: normal 10px arial, verdana, sans-serif;
  background-color: #ffffff;
}

HTML:

<table class="myTbl">
<thead>
<tr>
    <th></th>
</tr>
</thead>
<tbody>
<tr>
    <td></td>
</tr>
</tbody>
</table>

Ответы [ 3 ]

2 голосов
/ 16 мая 2012

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

Border-Collapse: Seperate - границы отделены (свойства межстрочного интервала и пустых ячеек игнорироваться не будут). Это по умолчанию

Эта ссылка может быть полезна для понимания коллапса границы: разрушения и разделения и для понимания того, как он работает.

http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-collapse

0 голосов
/ 03 января 2019

То, что стоит, похоже, решило мою проблему. Я заменил:

border-collapse: collapse;

с

border-collapse: separate;
border-spacing: 0;
0 голосов
/ 19 апреля 2013

Я также столкнулся с этой проблемой коллапса границ в ff - где большинство ячеек в таблице показывают границы, но случайная ячейка не показывает границ - что выглядит странно. Я попробовал предложенный Сантой обходной путь, и он работает - с помощью border-collapse: Отдельно; и установив интервал границы равным 0, он уменьшает расстояние между разделенными границами до нуля, придавая «вид» свернутой границы (другими словами, что border-collapse: collapse; предполагалось сделать в ff).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...