1

我正在使用其他人的代码,该代码将整个站点构建在一个非常烦人的表格结构上,每个<td>元素的宽度为 100%……如果我有时间,我不会在这里问这个,而只是重写整个该死的东西,但它是一个相当大的站点,需要我数周的时间来重写,而且我需要 jquery 插件数据表才能工作。但是,由于#container td { width: 100%; padding: 0; }主样式定义中的条目,整个表格完全混乱:-(

所以......有没有办法让CSS在所有表上使用这些默认定义,除了<table id="exception">它应该忽略这些设置而是使用数据表附带的那些?

问题是优先级 -table.dataTable td { padding: 3px 10px; }例如数据表有代码,它被忽略了,因为#container td有优先级......

再一次,尽管我想,我现在不能弄乱原来的网站结构。我可以编辑某些项目的数据表 CSS,但我还必须以width: 100%一种仍然允许数据表实现自己的定义的方式删除这个表的内容......

我在这个网站上的一个页面上使用 jQuery,所以也许我可以用它来清除这些定义,但是那也会清除数据表设置的定义......

想法(除了“不要使用表格”)?

4

3 回答 3

5

当然,您可以通过稍微调整 CSS 来做到这一点(除非我读错了):

table:not(#exception) {
  /* Target all tables except the one with ID exception. */
}

可能还有其他可以使用的细微调整,但这取决于布局。

所有主要浏览器:not都支持选择器,但旧版本的 IE(8 和更早版本)不支持。解决此问题的一种方法是使用Selectivizr库。

“Selectivizr 是一个 JavaScript 实用程序,它在 Internet Explorer 6-8 中模拟 CSS3 伪类和属性选择器。只需将脚本包含在您的页面中,剩下的工作就交给 selectivizr。”

正如您提到的,您正在使用 DataTables,您正在使用 jQuery,因此使用 Selectivizr 仅意味着包含<script>, 然后:not将在旧版本的 IE (6-8) 中运行。

于 2013-07-02T15:54:09.740 回答
0

也许您可以将 !important 应用于表 id="exception" css 规则。

于 2013-07-02T15:58:11.473 回答
0

你试过!important吗?

table.dataTable td { width: auto !important; }

另一种方法是制作更具体的选择器:

#container table.dataTable td { width: auto; }

哪个应该比#container td

于 2013-07-02T15:58:31.133 回答