What browser are you on?

I'm on chrome 80.0.3987.87

I'm using Brave browser (current version).

Brave is up to date
Version 1.4.95 Chromium: 80.0.3987.122 (Official Build) (64-bit)

Strange thing is, in the docs the tables align perfectly. In my app and code sandbox etc... it doesn't

edit: I tried and it isn't working in vanilla Chrome for me either (checked in incognito mode with no extensions)

Version 80.0.3987.122 (Official Build) (64-bit)

edit 2: Very strange, even using MS Edge browser I see the exact same thing...

Strange. This must me something with my PC. Somehow.

Super weird...I'd expect all of those browsers to have the same behavior... Would it be possible for you to inspect those elements and try to highlight where exactly the discrepancy in width is stemming from?

I think I found where the issue is coming from... but can't work out why it is displaying inconsistently...

See this extra padding on the right (red box is mine).

In my browser when checking:

• All the header cells are equal width: 295.25 (1181px)
  

• All the content cells are equal width: 299.5 (1198px)
  

• 17px difference, which is the same as that right-padding.

My code doesn't add any padding:

<Table>
  <Table.Head>
    <Table.TextHeaderCell>Date</Table.TextHeaderCell>
    <Table.TextHeaderCell>User</Table.TextHeaderCell>
    <Table.TextHeaderCell>Entry</Table.TextHeaderCell>
    <Table.TextHeaderCell>Data</Table.TextHeaderCell>
  </Table.Head>
  <Table.Body>{pages}</Table.Body>
</Table>

I am seeing the same thing in the code-sandbox examples from my original post too...

I can confirm that if I simply delete the 17px right padding class in the inspector 📦pr_17px the table aligns perfectly...

This looks to be the culprit?

Not sure why it is adding padding to the right of the table header because it isn't doing anything differently. Even with no scrollbar visible it has the 17px padding.

No scrollbar visible:

Scrollbar visible:

It's there to account for the table scroll bar, not the window scrollbar.

https://github.com/segmentio/evergreen/blame/21feaa5491752a8f612ec123312b35b980ff709f/src/table/src/TableHead.js#L15-L16

So strange though, I checked my windows settings to see if there is an OS level setting which could be causing grief.
I've toggled this on/off and done full reboot in case the browser doesn't honor the setting immediately. No difference.

There is no scrollbar in the table in any examples where I am seeing the incorrect padding.

I updated my earlier comment above where I said it all looks fine in the table documentation.
Looking at the docs again - it does happen there too - but only where there is no scrollbar in the table as @mshwery pointed out...

Wrong. ❌

Right. ✔

What browser are you on?

I'm on chrome 80.0.3987.87

I dont know how you got this to work.
I've even used browser test suites which test websites in VMs (http://browsershots.org/ and https://www.browserling.com/) and I get the same alignment issues.

See below...

Firefox:

Chrome:

On my Macbook I don't have the issue. The 17px scrollbar class does not get applied.

Windows seems to be the common thread here... are you using Windows?

I think we're all on macs, let me boot up my windows machine and see what happens after work. I'll update you tonight!

@cstrat I apologize for the late reply, I came down with a cold the last few days...

Anyway, I was able to reproduce this instantly on a windows machine... so it seems like a pretty common windows issue. I'll dig into it more when I get some time

All good @Chrischuck, no need to explain - hope you're better.

I spent a good amount of time trying to work it out but was left pulling my hair out. 😭