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

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')
});