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.
