У меня небольшая проблема с Microsoft Edge:
Речь идет о приоритете рендеринга границ таблицы, когда установлено border-collapse: collapse;. Я читал об этих приоритетах, что есть правила, какие границы отображаются с более высокими приоритетами: от менее важного к более важному: таблица, tbody, tr, td... также сами стили границы: двойной над одинарным и так далее.
Нормальное поведение таблицы со свернутыми границами и внутренними границами другого цвета заключается в том, что внутренние границы «перетекают» во внешние: https://jsfiddle.net/fpyf1kL7/3/ (это верно для Chrome, FF и Edge).
Поэтому, чтобы внутренние границы не «перетекали» во внешние, я нашел быстрое исправление, установив стиль границы самой таблицы на «двойной», но при этом иметь ширину 1 пиксель (таким образом, он выглядит как «сплошной»): https://jsfiddle.net/fpyf1kL7/4/ , но это работает только в Chrome и FF. В Microsoft Edge внутренние границы по-прежнему «перетекают» во внешние.
Я уже нашел обходной путь для этой проблемы, используя border-collapse: separate; и border-spacing: 0;: https://jsfiddle.net/fpyf1kL7 /2/ . Это работает в Chrome, FF и Edge. Но теперь границы больше не рушатся, поэтому я больше не могу иметь границу для элементов tbody или tr, и мне нужно быть осторожным, чтобы не иметь смежных границ.
Итак, настоящие вопросы здесь:
- Почему Microsoft Edge по-разному обрабатывает проблему рендеринга свернутой границы?
- Есть ли способ заставить его работать правильно (не «кровотечение») в Microsoft Edge со свернутыми границами?
