tabla - estilos de bordes css
Color del borde de la tabla en CSS con el colapso del borde (4)
Quiero poner una línea sobre un campo en una tabla, para indicar que es una suma de los valores anteriores. Sin embargo, la tabla ya tiene bordes por defecto.
Aquí hay un ejemplo: Tengo una tabla con bordes colapsados. Puse el borde inferior en un campo y el borde superior en el campo debajo de él. Ambos especifican el mismo borde. El CSS para el superior se usa. ¿Hay alguna manera de usar el de abajo?
<html>
<head>
<style type="text/css">
table { border-collapse: collapse; }
td.first { border-bottom: solid red 1px; }
td.second { border-top: solid gold 1px; }
</style>
<body>
<table>
<tr><td class="first">Hello</td></tr>
<tr><td class="second">World</td></tr>
</table>
</body>
</html>
Esto muestra dos celdas con una línea roja entre ellas. ¿Hay manera de obtener una línea de oro?
Eliminar border-collapse: collapse; a partir de su código, en su lugar, establezca el atributo cellspacing en 0 para su tabla.
Este es un comportamiento definido de border-collapse de la border-collapse . La página 357 de la 3ª edición de la Guía definitiva de CSS de O''Reilly dice:
si los bordes colapsados tienen el mismo estilo y ancho, pero difieren en color, entonces ... de mayor a menor frecuencia: celda, fila, grupo de filas, columna, grupo de columnas, tabla.
si ... provienen del mismo tipo de elemento, como dos filas ... entonces el color se toma de los bordes que son los más altos y los más a la izquierda.
Así que lo más alto, que es rojo, gana.
Una forma de anular esto puede ser usar la celda para que el color se gane sobre el color de la fila.
ejemplo: http://jsfiddle.net/Chapm/
Las reglas que tienen mayor prioridad que esta "regla del mismo color es"
Más amplia frontera gana sobre los más estrechos
y después de eso,
doble triunfo sobre sólido, luego discontinuo, punteado, cresta, inicio, ranura, inserción
Puede usar 2px para el oro para que gane, e intenté en Chrome usar 1px pero double , y aparece como 1px solid y también ganará el rojo. Aunque si desea utilizar este método, puede ser mejor asegurarse de que los navegadores que admite se comporten de la misma manera con esta técnica.
Simplemente cambie el colapso del borde para separar y establezca el espacio entre los bordes en cero.
Nota: IE8 admite la propiedad de espacio entre bordes solo si se especifica un! DOCTYPE.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table {
border-collapse: separate;
border-spacing: 0px;
}
td.first {
border-bottom: solid red 1px;
}
td.second {
border-top: solid gold 1px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="first">Hello</td>
</tr>
<tr>
<td class="second">World</td>
</tr>
</table>
</body>
</html>
Probado en win7 con: Chrome 16, IE 9, FF 9, Safari 5.0.5.
Simplemente quite el td.first { border-bottom: solid red 1px; } td.first { border-bottom: solid red 1px; } de tu estilo.
O cambie de red a gold en el selector td.first .