¿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!!

   .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; }      

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

 
1 366
2 777

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.

Prueba esto,

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

En CSS, el selector que es más específico tiene prioridad sobre los menos específicos. Por ejemplo, en su caso .main-table td tiene prioridad sobre el borde .left-border ya que la primera es más específica. 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 aún más.

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

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 intenté hacer que el borde derecho de la celda izquierda fuera rojo, utilizando el mismo marcado. Esta vez no funcionó en IE pero funcionó en FF y Chrome.

Si convierte el borde izquierdo de la celda derecha en rojo y el borde derecho de la celda izquierda en rojo, funciona en todos ellos.

       
1 366
2 777

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 “td” adicional

(Editado el borde 2px a 1px – ¡eso fue un error!)

otra solución,

http://jsfiddle.net/yPSVg/

 .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; } .right-border { border-right: 1px solid red !important; } 
 
1 366
2 777

El valor de collapse significa que los bordes se colapsan en un solo borde cuando sea posible. Desea usar separate para la propiedad de border-collapse .

Además, tiene dos tags de cierre .