Question

0

80

Views

CSS border is breaking for some reason

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

about 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-08-26T20:10:34.977Z

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>

0

80

CSS border is breaking for some reason

1 answers

0

Find remote jobs

Andres GPT