Detener CSS anulando el atributo de ancho HTML

Question

Tengo un contenido antiguo que contiene tablas con su ancho especificado con un atributo de ancho HTML como el siguiente: <table width="250">. Este atributo está siendo anulado por una regla para el selector de CSS table. ¿Puedo detener esta anulación para que las tablas tengan el ancho especificado en el atributo atrtrutexto HTML (que no siempre es de 250 píxeles, esto es solo un ejemplo)? Puedo seleccionar las tablas que no deberían tener anchos anulados con el selector #column1 table.

Answer 1

Prueba esto:

#column1 table { 
    width: auto; 
} 

Para que lo sepas, css siempre neutralizan atributos HTML en línea viejos. Esto suele ser un problema cuando se usa un editor wysiwyg.

Resolví este problema para el viejo html generado por un editor wysiwyg en cms con javascript y jquery. Me iterar sobre la mesa (s) y leer el atributo de anchura y altura que luego convierto a CSS en línea:

var $table = $('#column1 table'); 
$table.css({ 
    "width" : $table.attr('width'), 
    "height" : $table.attr('height') 
}); 

Answer 2

no se puede anular el CSS con HTML, pero se puede añadir el atributo style por ejemplo:

style = " width: 250px;" 

de edición: puede anular externamente poniendo importante en el extremo de la regla CSS que se anulan los atributos de cualquier otro css en relación con lo que está cambiando!.

por ejemplo:

#column1 table { 
    width: 250px !important; 
} 

Answer 3

Tome una mirada este enlace .. http://www.w3schools.com/cssref/pr_dim_width.asp

En el html poner Id decir

sobre la mesa y luego en el CSS simplemente haga

#TABLE1 
{ 
width:250; 
} 

Answer 4

¿Puede decirnos por qué está utilizando atributos html en línea como este?

A menos que tengas una razón muy fuerte, te aconsejo que muevas cualquier cosa relacionada con el estilo a CSS. Y es mucho mejor si el CSS tiene su propio archivo, no incluido en línea también.

Es una mejor práctica separar siempre el contenido de la presentación.

Answer 5

Una posible aunque poco elegante respuesta que se me ocurre es reemplazar la regla para el selector de CSS table con una para :not(#column1) table. Sin embargo, esto solo funcionará en algunos navegadores modernos y no en IE.

Answer 6

Como dije, ¡sugiero que use una hoja de estilo para eso! Simplemente implemente esto en su styles.css:

table { 
    width:250px; 
} 

y si no es suficiente, puede agregarlo!importantes, como:

table { 
    width:250px !important; 
} 

Y añadir la hoja de estilo como este en la parte de la cabeza de su html:

<link rel="stylesheet" type="text/css" href="css/stlyes.css"> 

De lo contrario, habría que añadir el style = "width: 250px" directamente a cada mesa . Si luego desea cambiar el ancho de nuevo a, p. 260px, tendrías que cambiarlos todos nuevamente.

Sin embargo, si tiene acceso a su código HTML, se recomienda utilizar Find-Replace para tener un código limpio. Casi cualquier programa TextEdit incluso muy simple debería tener una opción Find-Replace ...

Answer 7

Sé que esta pregunta fue hecha hace 2 años, pero podría ser útil para otras personas que tienen problemas similares. Puede usar el selector de atributo CSS:

table:not([width]) { 
    width: 250px; 
} 

Tenga en cuenta que, según mi entender, no funcionará en IE 9.