CSS border is breaking for some reason

Question

Making a table in css like this

const table = document.querySelector('table');
const wrapper = document.querySelector('#wrapper');
for (let i = 0; i < 11; i++) {
  const tr = document.createElement('tr');
  tr.id = `tr${i}`;
  table.querySelector('tbody').appendChild(tr);
  for (let index = 0; index < 11; index++) {
    const td = document.createElement('td');
    td.setAttribute('data-x', index);
    td.setAttribute('data-y', i);
    tr.appendChild(td)

  }
}

td {
  width: 10px;
  height: 10px;
  border: 1.5px solid grey;
  margin: 0;
  margin-left: 0;
  z-index: 99999;
  box-sizing: border-box;
  padding: 0;
}

td[data-x="5"][data-y="5"] {
  border-color: red !important;
}

td[data-x="4"][data-y="5"] {
  border-right-color: red !important;
}

td[data-x="5"][data-y="4"] {
  border-bottom-color: red !important;
}

td[data-x="5"][data-y="6"] {
  border-top-color: red !important;
}

td[data-x="6"][data-y="5"] {
  border-left-color: red !important;
}

table {
  border-collapse: collapse;
  padding: 0;
  border-spacing: 0;
  border-style: hidden;
}

<div id='wrapper'>
  <table cellspacing="0">
    <tbody>

    </tbody>
  </table>
</div>

But the problem is that there is two angles that doesn't change to red

My question is why this happens with these two angles but other two angles are fine and how to fix this problem.

Thanks

Answer 1

The table's cell borders are drawn in order, so you can get some bits of the red 'cut off' by neighboring cells' borders.

One way to do things is to keep the table's setting of borders but set the border color for that cell as transparent and add the border effect through a pseudo after element instead.

const table = document.querySelector('table');
const wrapper = document.querySelector('#wrapper');
for (let i = 0; i < 11; i++) {
  const tr = document.createElement('tr');
  tr.id = `tr${i}`;
  table.querySelector('tbody').appendChild(tr);
  for (let index = 0; index < 11; index++) {
    const td = document.createElement('td');
    td.setAttribute('data-x', index);
    td.setAttribute('data-y', i);
    tr.appendChild(td)

  }
}

td {
  width: 10px;
  height: 10px;
  border: 1.5px solid grey;
  margin: 0;
  margin-left: 0;
  z-index: 99999;
  box-sizing: border-box;
  padding: 0;
}

td[data-x="5"][data-y="5"] {
  position: relative;
  border-color: transparent;
}

td[data-x="5"][data-y="5"]::after {
  content: '';
  top: -1.5px;
  left: -1.5px;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  border: solid 1.6px red;
}

table {
  border-collapse: collapse;
  padding: 0;
  border-spacing: 0;
  border-style: hidden;
}

<div id='wrapper'>
  <table cellspacing="0">
    <tbody>

    </tbody>
  </table>
</div>