Color de borde de tabla en CSS con colapso de borde

Quiero poner una línea encima de un campo en una tabla, para indicar que es una suma de los valores anteriores. Sin embargo, la tabla ya tiene bordes por defecto.Color de borde de tabla en CSS con colapso de borde

Aquí hay un ejemplo: Tengo una tabla con bordes colapsados. Establecí 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 forma de obtener una línea dorada?

Fuente

2010-11-04 Sjoerd

Tiene que ver con la resolución de conflictos. [Esta es una página] (http://www.the-art-of-web.com/css/bordercollapse/) que explica cómo funciona y cómo calcula el navegador las diferentes fronteras. –

Creo que no hay una solución de CSS para esto, porque el colapso de frontera simplemente hace lo que hace. Puede usar algunas soluciones, por ejemplo, usar javascript. ¿Tiene alguna biblioteca de JavaScript incluida en su documento? –

Lo resolví usando jQuery, usando algo como esto: http://www.mail-archive.com/[email protected]/msg89877.html – Sjoerd

Esto es un comportamiento definido de border-collapse. Página 357 de la guía definitiva O'Reilly CSS tercera edición dice:

bordes cerrados si tienen el mismo estilo y anchura, pero se diferencian en el color, entonces ... de más a menos preferido: celda, fila, fila grupo, columna, grupo de columnas, tabla.

si ... vienen 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 la parte superior, que es de color rojo, gana.

Una forma de anular esto puede ser utilizar la celda para el color para ganar el color de la fila.

ejemplo: http://jsfiddle.net/Chapm/

Las reglas que tienen mayor prioridad que esta "regla mismo color es"

más amplia frontera gana sobre los estrechos

y después de eso,

double gana sobre sólido, luego se puntea, puntea, cresta, hacia afuera conjunto, surco, inserción

Usted puede utilizar 2px por el oro para que pueda ganar más, y lo intentó en Chrome para utilizar 1px pero double, y aparece como 1px solid y que va a ganar sobre el rojo también. 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.

http://jsfiddle.net/Chapm/2/

Fuente

2010-11-04 12:19:23

Esto soluciona mi problema. Sin embargo, no funciona en IE7. – Sjoerd

he actualizado con más reglas ... sí, esto es bastante específico y puede no ser el mismo en todos los tipos de navegadores. –

¡Muchas gracias! Estaba luchando tan mal con esto y no tenía idea de lo que estaba pasando. El truco 'doble' funcionó muy bien. Lo estoy usando para mostrar un borde alrededor de un 'TR' en vuelo estacionario. – vaughan

Elimina border-collapse: collapse; de tu código, en su lugar establece el atributo cellspacing en 0 para tu tabla.

Fuente

2010-11-04 12:08:42

Eso no funciona para mí ... –

revisa este http : //jsfiddle.net/CKHwj/. set border-collapse: separate; en su lugar –

Sí, pero esa muestra tanto el oro como el borde rojo (Firefox) –

Simplemente elimine el td.first { border-bottom: solid red 1px; } de su estilo.

O cambie red a gold en el selector td.first.

Example here.

Fuente

2010-11-04 12:10:20 Kyle

Sólo cambia border-collapse para separar y establecer espaciado de borde a cero.

Nota: IE8 admite la propiedad de espacio entre bordes solo si se especifica! 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.

Fuente

2012-02-09 13:09:15

La pregunta de OP fue un poco rara. No estoy seguro de si quería dos fronteras o no. Llegué aquí porque quería una mesa con un borde en la parte superior e inferior de cada '', pero los bordes estaban colapsando. Intenté 'border-collapse: separate' y había márgenes alrededor de las celdas de los que no me podía deshacer con CSS. Era el 'espaciado de frontera: 0' que me faltaba. Gracias por tu respuesta. – Gavin

Color de borde de tabla en CSS con colapso de borde

Respuesta

Cuestiones relacionadas