Непоследовательность стиля в Chrome и Firefox

У меня есть таблица, что для одной из ее я использую правило

border-right: 3px solid #000 !important;

Он отлично работает в Chrome, но в Firefox граница невидима. Я говорю невидимый, потому что, если я деактивирую правило, я вижу, что содержимое ячеек слегка перемещается.

-moz-box-sizing: border-box;

Ничего не помогло, насколько я могу судить.

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

Я попробовал другой предлагаемый вариант без хороших результатов. Ближе к решению проблемы было удаление border-collapse в целом, но это делает все границы видимыми, как видно из изображения ниже:

Это распространено для Firefox, и как я могу решить эту проблему.

Ответ 1

Я обновил оригинальный jsfiddle https://jsfiddle.net/sfodcjkz/4/ с некоторыми незначительными трюками https://jsfiddle.net/sfodcjkz/18/.

Изменения, которые я перенес над вашей скрипкой, следующие:

Удалены пустые элементы <tbody>. Лучшей практикой является группировка строк тела внутри <tbody>. Некоторые современные браузеры могут автоматически исправлять ошибки, но не все браузеры достаточно умны. Поэтому для согласованности мы можем избежать зависимости от более умных браузеров.
Затем у меня были проблемы с этими css:

Линия: 349

.responsive-table thead {
    clip: auto;
    height: auto;
    overflow: auto;
    position: relative;
    width: auto;
}

Line: 258

.responsive-table thead {
    border: 0 none;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

Просто удалите эти стили css, и вы сможете увидеть более чистый вид.

Ответ 2

Можно попытаться добавить еще один элемент блока внутри ячейки таблицы и применить стиль границы к этому элементу. Например, вы можете попытаться сделать что-то вроде этого:

<table>
  <tr>
    <td>
        <div style="border-right: 3px solid #000;">My Content</div>
    </td>
  </tr>
</table>

Табличные ячейки типа <td> и <th> имеют размер, отличный от обычного блока, встроенного блока или встроенных элементов, и поэтому границы могут также вычисляться немного по-разному в зависимости от доступного пространства.

Используя <div> внутри вашей ячейки таблицы, вы можете установить ее ширину до 100% и высоту до 100%, чтобы она покрывала всю доступную ячейку таблицы, тогда вы можете применить любую границу, которая вам нравится, к div и с box-sizing:border-box, установленным в элементе div, он должен выглядеть так, как вы хотите. Например:

<div style="border-right: 3px solid #000; width: 100%; height: 100%; box-sizing: border-box;">My Content</div>

Вот более подробная информация о размерах таблиц/размерности в коробке

Ответ 3

Это известная ошибка в Firefox. Это вызвано установкой border-collapse на collapse. Одно из решений - установить border-collapse на separate.