Edit 1: The strange issue appears to be related to the border-collapse property in CSS, as it can be resolved by using border-spacing: 0px. However, the question remains, why does border-collapse result in this behavior? It seems to be connected to scaling, where zooming in or out of the window causes these abnormal bold lines to appear. In my case, I have set both the browser and system (Windows 11) to default zoom levels, specifically at the recommended 125% scaling. I am puzzled as to what could be causing this issue.
Lately, I have noticed an odd horizontal line appearing after certain rows when attempting to create an HTML table. I have included a screenshot for reference. The code consists of a basic HTML table structure with simple CSS to include borders without any complexities. Here is the code snippet:
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;
}