CSS 边界由于某种原因而破裂

Question

像这样在 ZC7A62​​8CBA22E28EB17B5F5C6AE2A266AZ 中制作表格

 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>

但问题是有两个角度不会变成红色

我的问题是为什么这两个角度会发生这种情况，但其他两个角度很好，以及如何解决这个问题。

谢谢

Answer 1

表格的单元格边框是按顺序绘制的，因此您可以通过相邻单元格的边框获得一些红色的“截断”部分。

一种方法是保持表格的边框设置，但将该单元格的边框颜色设置为透明，并通过伪后元素添加边框效果。

 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>