Question

这是一个奇怪的问题，但是一个相当具体的案例。我正试图将现代风格融入传统网站。问题的一部分是CSS重置，它是新样式的一部分，其中包括这个CSS：

table {
    width: 100%;
}

在传统网站中，他们没有这种风格，并假设桌子缩小到合适的风格。从表面上看，这是对过渡样式表的简单补充：

table {
    width: auto;
}

但是，表格元素一次又一次地具有width属性。如果不应用任何CSS，则会遵循此属性，但只要应用CSS“修复”，表就会将大小减小到最小值。

我可以编写一些JavaScript来检测具有width属性的表并使用它来定义它们的样式，但我很好奇：有没有办法在纯CSS中执行它？

Answer 1

您可以使用:not()基于属性排除：

演示链接：http://tinker.io/8e18e/0

/* styles for tables with no "width" attribute */
table:not([width]) {
    width: auto;
}

Answer 2

不，CSS无法说“使用此属性替换的过时的表示属性”或类似内容。

Answer 3

是。删除width属性并使用CSS而不是已弃用的属性定义其宽度。添加一些理智的表类，并为这些类提供您期望的宽度。

Answer 4

您可以对表进行测试更改显示，不必设置宽度并处理填充，边距或大小调整。 http://tinker.io/8e18e/1

table {
    display:block;
    background:gray;
}
td, tr {
    width:100%;
    display:table-cell;
}
table[width], tr {
    border: 1px solid;
    table-layout:fixed;
    display:table;
}

是否可以将表格的宽度设置为＆＃34; auto＆＃34;在CSS但承认宽度属性？

4 个答案: