Border-collapse is not working properly in chrome browser. Some border lines are looking like thick. Please see this picture and help me to resolve this bug.
I need lite border for all rows. but highlighted rows border are looking like bold. For testing purpose please see in the link and remove background color. Please check in chrome browser. https://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy
This is not related to the user zooming the browser. It's the Windows display scaling, which now defaults to 125% on some devices. The resulting border-collapse looks normal at 80% browser zoom, but looks abnormal at 100%.
I found that setting border: 0.5px solid; effectively resolves the problem.
Check if you zoomed in the page? Press Ctrl+0 to reset zoom to 100%.
Can't see nothing in styles that can lead to this. Also the effect is very similar to browser rendering bug according to fractional scaling.
From the Result size: 753x… it can be assumed that your screen width is 1920px and you zoomed it to 1.25 :-)
There are multiple ways how you can achieve this, Naturally in CSS border or a line's minimum width is 1px can't be lower than 1px.
We can't actually make it thinner but we can make it LOOK thinner.
Option 1: would be keeping the color close to the background color will make 1px lines look thinner than 1px
Option 2: border-color:#dddddd50; reduce color opacity to achieve the same result, here 50 at the end of hex (dddddd) code defines opacity 00 to 99 Please note you can't add 100 at the end of hex code.
table{
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #dddddd50;
padding: 8px;
}<table id="customers">
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
<tr>
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>