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

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 .