Stop CSS overriding HTML width attribute

Question

I have some old content containing tables with their width specified with an HTML width attribute like so: <table width="250">. This attribute is being overridden by a rule for the CSS selector table. Can I stop this overriding so the tables have the width specified in the HTML attributute (which is not always 250 pixels, this is just an example)? I can pick out the tables which shouldn't have their widths overridden with the selector #column1 table.

Answer 1

you can't override the css with html but you can add the attribute style for example:

style = " width: 250px;"

edit: You can override it externally by putting !important on the end of the css rule which will cancel out any other css attributes in relation to what you're changing.

eg:

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

Answer 2

Try this:

#column1 table {
    width: auto;
}

Just so you know, css will always override old html inline attributes. This is usually a problem when using a wysiwyg editor.

I solved this problem for the old html generated by a wysiwyg editor in a cms with javascript and jquery. I iterate over the table(s) and read the width and height attribute which I then convert to inline css:

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

Answer 3

I know this question was asked 2 years ago, but it might be helpful for others who have similar issues. You can use CSS attribute selector:

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

Note that it won't work under IE 9 as far as i know.