How can I override a table width property in CSS

Question

I have the following style in an external CSS file called first.css

table { width: 100%; }

This makes the tables fill their container. If there are only two small columns they appear too far from each other.

To force the columns to appear nearer I have added this style

table { width: 50%; }

to a new file called second.css and linked it into the html file.

Is there any way to override the width property in first.css without the need to specify a width in second.css?

I would like the html behave as if there has never been a width property, but I do not want to modify first.css

Answer 1

You can use:

table { width: auto; }

in second.css, to strictly make "the html behave as if there was never been a width property". But I'm not 100% sure this is exactly what you want - if not, please clarify!

Answer 2

You could also add a style="width: auto" attribute to the table - this way only the html of the page will be modified.