Проблемы с отображением таблиц

[monochromer]

У ячеек нет боковых padding, поэтому текст прилипает к краям:

Варианты решения:

• добавить padding:
  
• если хочется оставить нулевые padding'и по бокам, то можно убрать фон и унести цветовой акцент на другой элемент, например, на бордюр:
  

Также у текущей версии Safari (17) наблюдается проблема с градиентом на элементе thead:

Градиент рисуется для ячеек, а не для всего элемента thead, с другими цветами виднее:

В Safari Technology Preview (18) градиент рисуется на весь элемент, но могут наблюдаться полосы на границе ячеек:

Решить эту проблему можно, задав свойcтва border-collapse: separate; border-spacing: 0.

Какого-то волшебного *zoom: 1 для Safari я не нашёл, поэтому предлагаю чуть изменить дизайн - убрать градиент и добавить padding'и либо убрать фон и задать бордюр.

Примеры статей, где есть таблицы:

• https://web-standards.ru/articles/speed-up-with-browserslist/
• https://web-standards.ru/articles/contenteditable/

[pepelsbey]

Вообще изначально была идея таблиц с линейками, без отступов слева. «Прилипание» кажется таковым только из-за фона заголовочных ячеек. Я как-то привык к этому и перестал замечать. Но соглашусь, всё равно бросается в глаза.

Можно обозначить заголовочные ячейки чёрной линией потолще, например. Двух зайцев одним фоном)