¿Por qué el color del borde de la celda de la tabla html no cambia?

¿Cómo puedo hacer que el borde izquierdo de la celda se vuelva rojo? ¿Por qué esto no funciona? ¡¡Gracias!!¿Por qué el color del borde de la celda de la tabla html no cambia?

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
.main-table { 
    border-collapse: collapse; 
} 
.main-table td { 
    margin: 0px; 
    padding: 0px; 
    border: 1px solid #aaa; 
    padding: 1px 4px 1px 4px; 
} 
.left-border { 
border-left: 1px solid red !important; 
} 
</style> 
</head> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body>

¿No debería el borde izquierdo anular el color especificado en .main-table td?

<table class='main-table' cellspacing='0' cellpadding='0'> 
<tr> 
    <td> 1 </td> 
    <td> 366 </td> 
</tr> 
<tr> 
    <td > 2 </td> 
    <td class='left-border'> 777 </td> 
</tr> 
</table> 

</body> 
</html>

Fuente

2012-01-18 vrepsys

Establezca el borde en 1px double red. Un borde "doble" de 1px de ancho parece idéntico a un "sólido", pero tiene una precedencia más alta en el cálculo del borde colapsado.

Fuente

2012-01-18 07:06:51

Como referencia, las reglas para la resolución de conflictos fronterizos en CSS2.1 son [aquí] (http://www.w3.org/TR/CSS2/tables.html#border-conflict-resolution). –

Esto funciona. Genial, gracias por el enlace! – vrepsys

Si está satisfecho con una respuesta en StackOverflow, acéptela marcando la casilla debajo del puntaje del voto. –

Prueba de esto,

.main-table { 
    border-collapse: collapse; 
} 
.left-border { 
border-left: 2px solid red !important; 
}

Fuente

2012-01-18 07:03:23 anglimasS

No hace lo que hace la pregunta. –

no es trabajo ... –

@ Mr.T.K - Ahora compruebe la ... – anglimasS

-1

El valor collapse significa que las fronteras se contraen en una sola frontera cuando sea posible. Quiere usar separate para la propiedad border-collapse.

Además, tiene dos etiquetas de cierre </head>.

Fuente

2012-01-18 07:04:38 styfle

No hace lo que se pregunta. –

@Kolink: ¿Por qué no dejamos que la persona que hizo la pregunta decida? – styfle

Porque debe tratar de cumplir con lo que preguntan a menos que no haya otra alternativa.Sé que cuando uso 'border-collapse: collapse' lo hago por una razón, y esa razón es anular el' por separado' predeterminado para producir el efecto de mi elección. –

otra solución,

http://jsfiddle.net/yPSVg/

Fuente

2012-01-18 07:09:22

En el selector CSS que es más específica tendrá prioridad sobre las específicas menores. Por ejemplo, en su caso .main-table td tiene prioridad sobre .left-border ya que el primero es más específico. Para resolverlo, puede especificar: .main-table td.left-border para la anulación de borde. Esto es más correcto y mejor que usar !important, que elimina todas las posibilidades de anularlo más.

Vea este enlace para obtener información sobre la precedencia selector CSS: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Fuente

2012-01-18 07:09:30 techfoobar

El '! Important' elude este problema, aunque sí creo que es mejor usar la especificidad que confiar en'! Important' –

Me gustaría ir con anglimass, pero con un cambio en el css:

td.left-border { 
border-left: 1px double red !important; 
}

Es decir, el selector debe tener el adicional " td"

(editado la frontera 2px a 1px - que fue un error!)

Fuente

2012-01-18 07:19:54 BilalKat

. Se está cambiando el doble al doble de lo que ayuda. Establecer el ancho del borde en 2px ayuda a cambiar el color, incluso cuando es sólido. Sin embargo, lo que necesitaba era 1px border. Gracias de cualquier manera – vrepsys

Hmmm. Casi parece que esto depende del orden en que el navegador dibuja los límites de las celdas. Intenté lo anterior en IE8 y se veía bien, pero no funcionó en FF o Chrome.

Luego traté de hacer que el borde derecho de la celda izquierda fuera rojo, utilizando exactamente el mismo marcado. Esta vez no funcionó en IE pero funcionó en FF y Chrome.

Si hace que el borde izquierdo de la celda derecha sea rojo y el borde derecho de la celda izquierda roja, funciona en todos ellos.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
.main-table 
{ 
    border-collapse: collapse; 
} 
.main-table td 
{ 
    margin: 0px; 
    padding: 0px; 
    border: 1px solid #aaa; 
    padding: 1px 4px 1px 4px; 
} 
.right-border 
{ 
    border-right: 1px solid red !important; 
} 
.left-border 
{ 
    border-left: 1px solid red !important; 
} 
</style> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 
<body> 
    <table class='main-table' cellspacing='0' cellpadding='0'> 
     <tr> 
      <td> 1 </td> 
      <td> 366 </td> 
     </tr> 
     <tr> 
      <td class='right-border'> 2 </td> 
      <td class='left-border'> 777 </td> 
     </tr> 
    </table> 
</body> 
</html>

Fuente

2012-01-18 07:35:28

¿Por qué el color del borde de la celda de la tabla html no cambia?

Respuesta

Cuestiones relacionadas