Table borders html css

Question

I have a frame div and inside of this frame is a table with several columns and rows. For some reason, some of the borders are merging with each other.

 table { width: 50%; /* Ширина таблицы */ border: 1px solid black; /* Рамка вокруг таблицы */ border-collapse: collapse; /* Отображать только одинарные линии */ } th { background: #ccc; /* Цвет фона ячеек */ padding: 3px; /* Поля вокруг содержимого ячеек */ border-collapse: collapse; } td { font-family: Verdana; font-size: 16pt; border: 1px solid black; /* Граница вокруг ячеек */ text-align: center; border-collapse: collapse; } .brd { border: 5px black; /* Параметры границы */ padding: 10px; /* Поля вокруг текста */ border-style: inset; /*solid;*/ border-collapse: collapse; }

 <div class="brd" align="center"> <table> <tr> <td>0</td> <td>1</td> <td>0</td> <td>0</td> </tr> <tr> <td>0</td> <td>0</td> <td>1</td> <td>0</td> </tr> <tr> <td>0</td> <td>0</td> <td>0</td> <td>1</td> </tr> <tr> <td>1</td> <td>0</td> <td>0</td> <td>0</td> </tr> </table> </div>

Why are some of the field borders inside of the table merging and getting bolder and how would I go about correcting this?

Answer 1

This is due to border-collapse and the fact you are adding border on all cells.

To avoid the problem you should adapt your cell border to get only 1 border:

/*ADDED*/
table{
  border:0px;
  border-collapse: initial;
  border-spacing: 0px;
}
td{
  border-bottom:0px;
  border-right:0px;
  border-collapse: initial;
}
tr > td:last-child {
  border-right:1px solid black;
}
tr:last-child > td {
  border-bottom:1px solid black;
}

DEMO

 table { width: 50%; /* Ширина таблицы */ border: 1px solid black; /* Рамка вокруг таблицы */ border-collapse: collapse; /* Отображать только одинарные линии */ } th { background: #ccc; /* Цвет фона ячеек */ padding: 3px; /* Поля вокруг содержимого ячеек */ border-collapse: collapse; } td { font-family: Verdana; font-size:16pt; border: 1px solid black; /* Граница вокруг ячеек */ text-align: center; border-collapse: collapse; } .brd { border: 5px black; /* Параметры границы */ padding: 10px; /* Поля вокруг текста */ border-style: inset; /*solid;*/ border-collapse: collapse; } /*ADDED*/ table{ border:0px; border-collapse: initial; border-spacing: 0px; } td{ border-bottom:0px; border-right:0px; border-collapse: initial; } tr > td:last-child { border-right:1px solid black; } tr:last-child > td { border-bottom:1px solid black; }

 <div class="brd" align="center"> <table> <tr> <td>0</td> <td>1</td> <td>0</td> <td>0</td> </tr> <tr> <td>0</td> <td>0</td> <td>1</td> <td>0</td> </tr> <tr> <td>0</td> <td>0</td> <td>0</td> <td>1</td> </tr> <tr> <td>1</td> <td>0</td> <td>0</td> <td>0</td> </tr> </table> </div>

Answer 2

This question was asked already: See here

It seems that problem are related browser/OS. pixels isn't rendered correctly. On Mac screens it seems totally ok. Try different browsers.

As a trick you can use bolder table border and lighter color.