Ya sabes, como una tabla de tic-tac-toe. Estaba pensando en cómo hacer esto el otro día, como hace uno. Hay tres formas en las que puedo pensar. Uno involucra un buen puñado de reglas y es la forma en que pienso intuitivamente, uno involucra un atributo obsoleto y uno es muy simple y se siente como un truco CSS.
Posibilidad n. ° 1) Eliminar las fronteras que no necesita
Esta es la primera forma en que pienso. Agregue un borde en todas partes, luego elimine el borde en:
- La parte superior de cada celda en la primera fila
- La parte inferior de cada celda en la última fila
- La izquierda de la primera celda de cada fila
- La derecha de la última celda de cada fila
table {
border-collapse: collapse;
}
table td {
border: 5px solid black;
}
table tr:first-child td {
border-top: 0;
}
table tr td:first-child {
border-left: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:last-child {
border-right: 0;
}Vea el borde interior de la pluma en la tabla n. ° 1 de Chris Coyier (@chriscoyier) en CodePen.
Posibilidad # 2) El atributo `reglas`
No se recomienda porque es un atributo obsoleto. Pero, para eso estaban específicamente las reglas.
Vea el borde interior de la pluma en la tabla n. ° 1 de Chris Coyier (@chriscoyier) en CodePen.
Puedes controlar el color con border-color, pero no border-width o border-style.
Posibilidad # 3) Usar `border-style: hidden;`
Este es el que me parece un truco de CSS.
table {
border-collapse: collapse;
border-style: hidden;
}
table td {
border: 5px solid black;
}MDN tiene una explicación:
En caso de que la celda de la tabla y el borde colapsen, el valor oculto tiene la prioridad más alta: significa que si se establece cualquier otro borde en conflicto, no se mostrará.
Poniendo border-style: hidden; en la mesa en sí, significa que “oculto” gana en ese borde exterior, pero solo en el borde exterior, no en ninguno de los otros bordes de las celdas interiores.
Vea el borde interior de la pluma en la tabla n. ° 3 de Chris Coyier (@chriscoyier) en CodePen.
¿Puedes pensar en otras formas?