HTML Tables has a weird bold horizontal line due to border-collapse property

Issue

Edit 1: The issue seems to be with the border-collapse property of CSS so it can be fixed by using border-spacing: 0px. But then why is border-collapse causing it? it has something to do with scaling as in if you are zoomed in or out of the window it causes the weird bold lines but in my case, I have the browser set to default zoom as well as the system (windows 11) is also at recommended 125% ( which I always used) scaling. I don't understand what is wrong

Recently I am getting a weird horizontal line after some rows when I try to create an HTML table. I have attached the screenshot. The code is a simple HTML table and simple CSS to add borders nothing fancy. I will attach the code here.

table.html

<table>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Phone</th>
        <th>Email</th>
    </tr>
    <?php while($user= mysqli_fetch_array($query)){ ?>
    <tr>
        <td><?php echo $user['id']; ?></td>
        <td><?php echo $user['name']; ?></td>
        <td><?php echo $user['phone']; ?></td>
        <td><?php echo $user['email']; ?></td>
    </tr>
    <?php } ?>
</table>

style.css

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

Solution

This is caused by improper scaling handling of browsers.

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 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.8px;
  }
}

@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.

Answered By - DvdRom