Css. Double cell border

Question

Can someone explain me why I see 2px bottom border every 2-5 rows on simple table. It seems that the problem depends on the monitor, it disappears on some monitors. In some monitors it is only appears if I scale the content in browser. But why? I strongly use:

border-bottom:1px solid #ccc; border-collapse: collapse;

IMHO the border should be always 1px thikness (or 2px if content is scaled). But some borders of 1px and some of 2px looks strange and dirty.

Example:

table {
    border-collapse: collapse;
    border-spacing: 0;
    box-sizing: border-box;
}
table, table tr, table tr td {
    border: none;
}
table tr td {
    border-bottom: 1px solid #ccc;
}

<table>
<tbody>
<tr>
<td><a class="folder" href="/files/7.3.5/">7.3.5</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.3.4/">7.3.4</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.3.3/">7.3.3</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.3.2/">7.3.2</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.3.1/">7.3.1</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.3.0/">7.3.0</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.2.5/">7.2.5</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.2.4/">7.2.4</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.2.3/">7.2.3</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.2.2/">7.2.2</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.2.1/">7.2.1</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.2.0/">7.2.0</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.1.5/">7.1.5</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.1.4/">7.1.4</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.1.3/">7.1.3</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.1.2/">7.1.2</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.1.1/">7.1.1</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.1.0/">7.1.0</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.0.5/">7.0.5</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.0.4/">7.0.4</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.0.3/">7.0.3</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.0.2/">7.0.2</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.0.1/">7.0.1</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/7.0.0/">7.0.0</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.3.5/">6.3.5</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.3.4/">6.3.4</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.3.3/">6.3.3</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.3.2/">6.3.2</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.3.1/">6.3.1</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.3.0/">6.3.0</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.2.5/">6.2.5</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.2.4/">6.2.4</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.2.3/">6.2.3</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.2.2/">6.2.2</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.2.1/">6.2.1</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.2.0/">6.2.0</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.1.5/">6.1.5</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.1.4/">6.1.4</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.1.3/">6.1.3</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.1.2/">6.1.2</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.1.1/">6.1.1</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.1.0/">6.1.0</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.0.5/">6.0.5</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/6.0.0/">6.0.0</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/5.3.5/">5.3.5</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/5.2.5/">5.2.5</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/5.1.6/">5.1.6</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/5.0.6/">5.0.6</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/4.2.6/">4.2.6</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/4.1.3/">4.1.3</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/4.0.5/">4.0.5</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/3.8.5/">3.8.5</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/3.7.8/">3.7.8</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/3.6.10/">3.6.10</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/3.5.9/">3.5.9</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/3.4.5/">3.4.5</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/3.3.2/">3.3.2</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/21.1.3/">21.1.3</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/21.1.2/">21.1.2</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/21.1.1/">21.1.1</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/21.1.0/">21.1.0</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/21.0.5/">21.0.5</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/21.0.4/">21.0.4</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/21.0.3/">21.0.3</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/21.0.2/">21.0.2</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/21.0.1/">21.0.1</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a class="folder" href="/files/21.0.0/">21.0.0</a></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

The default behaviour `border-collapse: separate;` appears to work fine. Try removing `border-collapse: collapse;` — Emil Dimitrov, Jul 27 '21 at 09:00
Thanks. Yes it works fine! Now can someone explain me why? :) `border-collapse: collapse;` should leave only 1 border line between cells, `border-collapse: separate;` should draw a line around every cell. So using `border-collapse: collapse;` I should get exactly 1px line. — Movs, Jul 27 '21 at 09:16
I don't think anyone has fully solved this...? Although, it looks pretty good in the code snippet. — wazz, Jul 27 '21 at 19:23

Css. Double cell border

0 Answers0