Проблемы со стилем границ таблицы в Chrome (работает в FF)

Question

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

table { border-collapse: collapse; }
td { border: 1px solid gray; }

Сильная граница: https://jsfiddle.net/r8h7abnf/ Вся нижняя граница ячейки выше привязанной.

td.red { border: 3px solid red; }

Без границы: https://jsfiddle.net/yrm8sfLp/ Не всегда работает.

td.gap { border: 0; }

Можно ли как-то адаптировать стили, чтобы он работал в обоих браузерах?

Answer 1

Это очень давняя ошибка в Chrome: https://crbug.com/2902: (

Вы можете обойти эту проблему, если найдете способ использовать только colspan == 1.

Обратите внимание, что FWIW, добавляя display: block к td.red, помещает рамку вокруг рамки, которая находится внутри неявно добавленной ячейки. Вы можете видеть, что красная граница не покрывает серую рамку, а вместо этого находится внутри нее.