DPI Scaling make "border: 1px solid #ccc" thinkness inconsistent

 https://stackoverflow.com/questions/71674803/html-tables-has-a-weird-bold-horizontal-line-due-to-border-collapse-property

If you have a 1px border and DPI Scaling set to, for example 150%, the border would technically be 1.5px. Because the browser doesn't use sub-pixel rendering, it alternates between 1px and 2px.

There are multiple ways to deal with it.

---

1. Set the border-width to 0.01px

A quick and dirty workaround, because the Browser will fallback to at least 1px

---

2. Use resolution media queries

Change the border-width to the appropriate decimal per scaling level.

@media (min-resolution: 120dpi) {
  table, th, td {
    border-width: 0.75px;
  }
}

@media (min-resolution: 144dpi) {
  table, th, td {
    border-width: 0.666px;
  }
}

@media (min-resolution: 192dpi) {
  table, th, td {
    border-width: 0.5px;
  }
}

Here's an overview of the different DPI Scaling Levels and their values

DPI Scaling Level

• Smaller 100% (default) = 96 dpi
• Medium 125% = 120 dpi
• Larger 150% = 144 dpi
• Extra Large 200% = 192 dpi

---

3. JavaScript

Change the border-width to the appropriate decimal per scaling level with JavaScript using the window.devicePixelRatio variable.