如何覆盖CSS中的表宽度属性

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

我在名为first.css的外部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.

到一个名为second.css的新文件,并将其链接到html文件。

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

有没有办法覆盖first.css中的width属性而无需在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

我希望html表现得好像从未有过width属性,但我不想修改first.css

3 个解决方案

#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!

在second.css中,严格地使“html表现得好像从未有过宽度属性”。但我并非100%确定这正是你想要的 - 如果没有,请澄清!

#2

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

您还可以向表中添加style =“width:auto”属性 - 这样只会修改页面的html。

#3

table { width: 50%; !important }

表{宽度:50%; !important}

adding !important to any Style makes it override other ones no matter if it is a parent element or child element

添加!important对任何Style都会覆盖其他的,无论它是父元素还是子元素

#1