CODEWITHSUNDEEP
htmlcssgoogle-chrome
Chandhu Vutukuru
Chandhu Vutukuru

Reputation: 85

Thick border issue in chrome browser

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

Upvotes: 7

Views: 4732

Answers (4)

Eric Barr
Eric Barr

Reputation: 4165

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

Upvotes: 0

kiran
kiran

Reputation: 693

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>

Upvotes: -1

Robert Chapin
Robert Chapin

Reputation: 370

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.

Upvotes: 17

keymasterr
keymasterr

Reputation: 471

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

Upvotes: 4

Related Questions