He resumido cómo usar CSS para lograr la luz del borde y el efecto oscuro de la tabla Border + BorderCollark + BorderColorlight. Luego, un internautor me preguntó por qué escribió un estilo CSS similar, pero solo podía ver el efecto fronterizo de la mesa normalmente bajo Opera, y no había nada en IE.
Salí de Opera9 y vi que realmente era el caso. La razón no es complicada: porque bajo IE (Firefox parece ser consistente con IE), si el contenido de un TD está vacío, incluso si establece la altura y el ancho, el estilo de borde de esta celda no se mostrará; Opera usará el estilo para renderizar independientemente de si hay contenido o no. Esta pregunta se encontró cuando me gradué. El jefe del departamento vino a preguntarme en ese momento, y luego le dije: solo agréguelo a cada TD vacío. Cada vez que me encuentro con este problema en el futuro, usaré este método simple, crudo y efectivo para resolverlo.
Pero hoy hice todo lo posible para estudiarlo varias veces, y de Jiarry, sabía que la sintaxis de CSS nos permitió cambiar estos comportamientos predeterminados: usando el colapso de la frontera: colapso; y células vacías: show; Para hacer que aparezca el borde desaparecido.
class = test1: Agregar colapso de borde: colapso;
.test1 {
borde: 1px sólido #9999999;
Colapso de borde: colapso;
Ancho: 60%
}
.test1 td {
Border-Bottom: 1PX Solid #9999999;
Altura: 28px;
RODING-LEFT: 6px;
}
clase1 hay contenido aquí
Hay contenido aquí
class = test2: Agregar border-colapso: colapso; y células vacías: show;
.test2 {
borde: 1px negro sólido;
Colapso de borde: colapso;
Ancho: 60%
}
.test2 td {
Border-Bottom: 1px Solid Black;
Altura: 28px;
RODING-LEFT: 6px;
Células vacías: espectáculo;
}
Class2 tiene contenido aquí
Hay contenido aquí
class = test3: sin colapso de borde: colapso; y células vacías: show;
.test3 {
borde: 1px sólido #9999999;
Ancho: 60%
}
.test3 td {
Border-Bottom: 1PX Solid #9999999;
Altura: 28px;
RODING-LEFT: 6px;
}
Class3 tiene contenido aquí
Hay contenido aquí