Thick border issue in chrome browser

Question

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

try using `!important` in `border: 1px solid #ddd !important;` — anirudh, Jun 24 '21 at 07:36
I tried it, not working. I need lite border for all rows. but highlighted rows border are looking like bold. you can see in the link. Please remove background color and check in chrome browser. https://www.w3schools.com/css/tryit.asp?filename=trycss_table_fancy — Chandhu Vutukuru, Jun 24 '21 at 09:46

Robert Chapin · Answer 1 · 2021-07-08T15:31:15.173

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.

edited Jul 08 '21 at 15:31

answered Jul 08 '21 at 15:12

Robert Chapin

330
2
14

keymasterr · Accepted Answer · 2021-06-24T21:34:06.897

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

edited Jun 24 '21 at 21:34

answered Jun 24 '21 at 10:07

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

score 0 · Answer 3 · answered Oct 18 '22 at 02:00

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)

score -1 · Answer 4 · answered Jul 08 '21 at 15:33

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>

Thick border issue in chrome browser

4 Answers4

Linked