Bug fix - Inconsistent table border width size on zoom and extra spaces between table cells

[ondrejkonec]

Problems:

• When zooming in/out, browser draw borders based on calculation (1px * [zoom]). So for example 1px * 150% = 1.5px and sometimes there is 1px border with and sometime 2px.
• Table is poorly designed using transparent backgrounds, which cause display problems.

Solution:

• Redesigned table (removed current pattern for displaying borders) and adding new solution
• Added 0.01px workaround, where browsers will fallback to at least 1px
• Changed the border-width to the appropriate decimal per scaling level at the end of the file
• Removed opacity for disable table row, because it affects background color and also text => added text color and background color from Stacks color palette

Results:

Zoom 100%

All tables looks similar - There are only small things caused by the fact that I remove the transparent border.

Zoom 150%

Not sure why upload images here does not work, so please open each section in new window for compare.

Default table

Before
After

Table with horizontal lines (s-table__bx)

Before
After

Simple border (s-table__bx-simple)

Before
After

No borders (s-table__b0)

Before
After

Zebra striping (s-table__stripes)

Before
After

Spacing - small (s-table__sm)

Before
After

Spacing - Large (s-table__lg)

Before
After

Sortable tables (s-table__sortable)

Before
After

Bar graphs (s-table--progress-bar)

Before
After

Bulk actions (s-table--bulk)

Before
After

Total rows (s-table--totals)

Before
After

Inactive rows (<tr class="is-disabled">)

Before
After

Results

• All tables now looks consistent with 1px border across browsers, table variants and zoom levels
• There is no spacing between cells

Tested

• Tested on Chrome 106.0.5249.91, Safari 15.6.1, Firefox 105.0.1, Edge 105.0.1343.53

Note

I created all variations of Table component in Figma, if designers would like to use it in their component library.

What do you think?

Hope it helps!

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	cf3a9f1
🔍 Latest deploy log	https://app.netlify.com/sites/stacks/deploys/633ab4675f7e5b0008be57b4
😎 Deploy Preview	https://deploy-preview-1130--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.