Граница в div не совпадает с границей в заголовке таблицы в Chrome

Question

У меня есть таблица с заголовком, и я пытаюсь разместить рядом с ней элемент div, чтобы он представлял собой расширение заголовка таблицы. Это отлично работает в Firefox: (X находится в div, отделенном от thead)

Но в Chrome граница смещена на один пиксель:

Когда я проверяю элементы в Chrome, и thead, и div имеют одинаковую высоту, поэтому странно, что их границы окажутся в разных местах. Если я добавлю поле в 1 пиксель к вершине элемента div, граница выстроится в линию, но это создаст разрыв в один пиксель вверху.

Вот код и окно, которые показывают, с чем я имею дело. В этом примере используется Tailwind CSS. https://codesandbox.io/s/quirky-hooks-gf6cx Просмотрите его в Firefox и Chrome, чтобы увидеть разницу.

Спасибо за вашу помощь.

Answer 1

Chrome рассчитать высоту таблицы на 1 пиксель больше, это кажется ошибкой.

Чтобы исправить это, вы можете добавить блок отображения к tr https://codesandbox.io/s/modest-tu-muw2m

РЕДАКТИРОВАТЬ:

Вы можете создать div внутри элемента th, чтобы избежать ошибки: https://codesandbox.io/s/reverent-microservice-ltz40