0
82
VisualizaçõesEl borde CSS se está rompiendo por alguna razón
Haciendo una tabla en css como esta
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> Pero el problema es que hay dos ángulos que no cambia a rojo. 
Mi pregunta es por qué sucede esto con estos dos ángulos pero los otros dos ángulos están bien y cómo solucionar este problema.
Gracias
·
Santiago Trujillo
1 Respostas
Responde à pergunta0
Los bordes de las celdas de la tabla se dibujan en orden, por lo que puede obtener algunos trozos del rojo 'cortados' por los bordes de las celdas vecinas.
Una forma de hacer las cosas es mantener la configuración de los bordes de la tabla, pero establecer el color del borde para esa celda como transparente y agregar el efecto de borde a través de un pseudo elemento posterior.
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>
·
Santiago Trujillo
Relatório
Responde à pergunta