div 上的边框与 Chrome 中表头上的边框不对齐

Question

I have a table with a header, and I'm trying to place a div next to it such that it appears to be an extension of the table header. This works fine in Firefox: (the X is in a div separate from the thead)

But in Chrome the border is offset by one pixel:

When I inspect the elements in Chrome, both the thead and the div are the same height, so it's strange that their borders would end up in different places. If I add a 1px margin to the top of the div, the border lines up but it creates a one pixel tall gap at the top.

Here's a codesandbox that shows what I'm dealing with. This example is using TailwindCSS . https://codesandbox.io/s/quirky-hooks-gf6cx View it in Firefox and Chrome to see the difference.

Thanks for your help.

Answer 1

Chrome calculate the height of table with 1px more, it seems a bug.

To fix you can add the display block to tr https://codesandbox.io/s/modest-tu-muw2m

EDIT:

You can create a div inside a th element to avoid bug: https://codesandbox.io/s/reverent-microservice-ltz40