Consistent CSS border width with zoom

Question

I have a 4K monitor with my Windows scaling set to 150% and my Chrome zoom set to 100%. On the website I am developing using Bootstrap 4.5.2, this causes Chrome to display table borders with inconsistent thickness. Notice in the following screeshot how there are two groups of 4 lines that are thicker than the rest (you may need to zoom the image):

Here is a small example to reproduce the problem on Chrome 95.0.4638.69. This is reproducible with the zoom set to 150% either in Chrome or in Windows display settings.

<!DOCTYPE html>
<html>
    <head>
        <title>Annoying Borders</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    </head>
    <body>
        <table class="table table-sm">
            <thead>
                <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            </thead>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
            <tr><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td><td>lorem ipsum</td></tr>
       </table>
    </body>
</html>

My understanding is that this is due a rounding error where the calculated border thickness is somewhere between 1 and 2 pixels, so sometimes Chrome shows 1px and sometimes 2px. Before asking, I searched and found a suggested workaround of using 0.01px for border thickness. This does work, but it doesn't really address the root cause, and apparently can cause border not to display at all on some browsers.

When I inspect the HTML for sites like Stack Overflow or GitHub, they are using 1px for the border widths on their divs, the same as me, but their borders are always consistent. For example, look at the borders between questions on Stack Overflow, or the borders between files in the GitHub repo browser). Zooming does affect the border width on these sites; if I zoom way in, the border grows to 2px, for example, but all of the borders grow consistently. I have poked around in their CSS for quite some time but I can't figure out how they did it. Am I missing some magic CSS setting that fixes this problem? Or do the borders on divs and table cells behave fundamentally differently?

Please read [How to Ask](https://stackoverflow.com/help/how-to-ask). You'll need to edit your question and put [a minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) in your question. — Utmost Creator, Nov 03 '21 at 16:31
1stly,make sure that the border is not overwritten by the `media queries` (or you could try inline CSS styles ` — Utmost Creator, Nov 03 '21 at 17:13
Also, please have a look here: https://stackoverflow.com/a/42718300/6901693 — Utmost Creator, Nov 03 '21 at 17:22
I have tried overriding the CSS as follows: `.table td { border-top: 1px solid #dee2e6 !important; }` It doesn't work. Only thing I have found that seems to work is setting it to 0.01px, but I don't understand why GitHub and Stack Overflow are able to get consistent scaling on the borders and I can't when we both use 1px. Also looked at the question you linked, but it doesn't seem to provide a solution. I wouldn't care if all the borders were **consistently** 1px or 2px. It is ugly because it is inconsistent. — J.B. Langston, Nov 03 '21 at 17:26
`border: solid 0.15rem black !important;` then I have the same borders, but it may seem a little bit too much [link](https://jsfiddle.net/UtmostCreator/u2m6owsz/22/). not sure what else we could do here. Could you please provide a link from stackoverflow with a table so we could compare it, please? — Utmost Creator, Nov 03 '21 at 17:29
It's just the main stackoverflow.com home page. Look at the lines between each question. Or on this page, look at the lines between the comments on this very question. Or you can browse any GitHub repo (say https://github.com/torvalds/linux) and look at the lines between each file. The obvious difference is that these sites are applying a 1px border to
s, not s but it doesn't seem like that should make a difference. — J.B. Langston, Nov 03 '21 at 17:33
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/238846/discussion-between-utmost-creator-and-j-b-langston). — Utmost Creator, Nov 03 '21 at 17:48
The table is closed properly in your real code, right? In your example there's no closing `` tag. — BSMP, Nov 03 '21 at 18:29
For what it's worth, I don't need to set the zoom to anything other than 100% or use any Bootstrap to reproduce. — BSMP, Nov 03 '21 at 18:36
Yeah, it's closed in the real code. I just missed it when I was making the example. — J.B. Langston, Nov 03 '21 at 18:52
I am able to reproduce it without bootstrap as well. It only happens when `border-collapse: collapse` is set on the table. You say you see it at 100% zoom, but is your OS screen scaling 100% too? I see it if either my OS or my browser zooming is set to 150% but not if they're both 100%. — J.B. Langston, Nov 03 '21 at 19:30
Simplest possible repro (no bootstrap, minimal styling): https://jsfiddle.net/vp1a7skb/1/ — J.B. Langston, Nov 03 '21 at 19:47

score 1 · Accepted Answer · answered Nov 03 '21 at 18:20

1

Most probably, this is a chrome-based browser bug, as the Firefox browser handles/renders it appropriately.

You could report the bug to the chrome team by using this bug report link

Consider making a media query for huge screens (e.g. more than 2k would have different border sizes).

@media screen and (min-width: 2560px) {
  table, table * {
    border: solid 1px black !important;
  }
  /* or */
  * {
    border: solid 1px black !important;
  }
}

You could change the min-width for your liking. Also, it is better to avoid using !important and specify one extra Specificity (class, tag name).

answered Nov 03 '21 at 18:20

Utmost Creator

814
1
9
21

3

I've filed a bug here: https://bugs.chromium.org/p/chromium/issues/detail?id=1266546. "It's a bug" is a frustrating answer, but an answer nonetheless, so I'm accepting this. FWIW, the workaround I'm using is just to set the border to 0.01px width without any media queries. This renders properly on both 150% and 100% on all the browsers I tested (Chrome, Edge, Firefox) but I haven't tested Safari as I'm on Windows. – J.B. Langston Nov 03 '21 at 19:46

score 0 · Answer 2 · answered Jan 22 '23 at 21:43

If you only need horizontal lines (as on the picture), there's a painful workaround. Instead of using table borders, put div-s into every td, and set the top border of those div-s. Also if you need a border under the last tr, you have to add an extra empty tr with 0 content height, so that visually it will be just the border.

<html>
  <head>
    <style>
      /** ------------------------------------------------------------- */
      /** horizontal-borders-table                                      */
      /** ------------------------------------------------------------- */
      
      table.horizontal-borders-table {
        /* Get rid of unwanted spacing */
        border-collapse: collapse;
        border: 0;
      }
      .horizontal-borders-table td {
        /* Get rid of unwanted spacing */
        border: 0;
        padding: 0;
        vertical-align: top;
      }
      .horizontal-borders-table .td-content {
        border-top: var(--horizontal-border);
      }
      .horizontal-borders-table .closing-empty-tr .td-content {
        /* Ensure that we only have the border */
        padding: 0;
      }
      
      /** ------------------------------------------------------------- */
      /** Style for a specific table that uses horizontal-borders-table */
      /** ------------------------------------------------------------- */
      
      .example-table {
        --horizontal-border: 1px solid #000;
      }
      .example-table .td-content {
        /* Padding must be set on td-content, not on the td itself: */
        padding: 4px;
      }
    </style>
  </head>
  <body>
    <table class="horizontal-borders-table example-table">
      <tr>
        <td><div class="td-content">1</div></td>
        <td><div class="td-content">2</div></td>
        <td><div class="td-content">3</div></td>
      </tr>
      <tr>
        <td><div class="td-content">1</div></td>
        <td><div class="td-content">2<br>non-uniform</div></td>
        <td><div class="td-content">3</div></td>
      </tr>
      <tr>
        <td><div class="td-content">1</div></td>
        <td><div class="td-content">2</div></td>
        <td><div class="td-content">3</div></td>
      </tr>
      <tr class="closing-empty-tr">
        <td><div class="td-content"></div></td>
        <td><div class="td-content"></div></td>
        <td><div class="td-content"></div></td>
      </tr>
    </table>
  </body>
</html>

Some may wonder if this could be generalized to have all the borders (the whole gird), and almost, but there's a problem if the td content height is not uniform in the row, since you can't tell the div to fill the dynamic height of the td (as far as I know).

Consistent CSS border width with zoom

2 Answers2

Most probably, this is a chrome-based browser bug, as the Firefox browser handles/renders it appropriately.

Linked