I have a html table on my web page, given border-collapse: collapse; but at some rows border-bottom seems more highlighted and for some rows its less highlighted.
and highlighed rows change if we change the the zoom level.
At zoom level 100% it looks like below
Observation: 3rd row top border is more black than rest of rows border
At zoom level 125% it looks like below
Observation: 1st, 2nd & 3rd rows borders are more highlighted (black) than rest of rows border
Note: initially i thought it was some problem with my application css, but then i checked on w3school.com same behaviour reproduced for table on below page
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_collapse
Check and run below code snippet
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Uneven border </h2>
<p>you can see some borders are more highlighted than others and if we zoom the webpage then it might change the highlighted row borders.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>Any help will be appreciated..thanks
