7

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 enter image description here

keymasterr
  • 401
  • 2
  • 6
Chandhu Vutukuru
  • 85
  • 1
  • 5

4 Answers4

16

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.

Robert Chapin
  • 330
  • 2
  • 14
4

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 :-)

keymasterr
  • 401
  • 2
  • 6
  • Yes. It's right. But my page is looking good when chrome browser zoom at 80%, but not at 100%. Please let me know how can handle this zoom issue in chrome. – Chandhu Vutukuru Jun 28 '21 at 12:42
  • For me, this appears to be both a problem with browser zoom AND Windows page scaling. If I reset by browser to 100% on a 100% scaled monitor, the problem goes away. But on my monitor scaled at 125% the problem persists. The solution proposed by Robert Chapin below worked for me on both monitors. FYI, my dual monitors are both 1920x1080 – DennisP Sep 03 '21 at 17:52
0

As @robert-chapin indicated above, mine was also caused by the Windows display scaling being set to the (Recommended) 125%. Changing the border size in CSS did not help. The best solution for me was to simply change my Windows display scaling to 100%. Now my table borders look normal in Chrome again, and I fit more on the screen because everything is smaller. (By the way, if I zoom the browser to 125%, then I guess it's basically the same problem again and the thick borders re-appear)

screenshot of Windows display settings

Eric Barr
  • 3,999
  • 5
  • 29
  • 42
-1

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>
kiran
  • 683
  • 4
  • 12