css - 如果表格宽度超过页面，则更改 CSS

Question

使用响应式 CSS，可以根据屏幕尺寸执行某些 CSS。例如:

@media all and max-width: 1024px {...}

只为宽度小于 1024 的屏幕设置 CSS。现在我的目标是当元素(在我的例子中是表格)的宽度超过页面宽度时执行 CSS。

简单地说，我希望在我的表格放不下我的页面时执行 CSS。

如果这不行，我的表格的宽度和一个固定值比较也是可以的。因此，当某个元素的宽度大于 ... px 时，将添加 css。

我之所以要这样做，是因为我不希望表格超过页面宽度。根据 PHP 脚本的输出，表格可以有不同数量的列。

我知道这可以用 Javascript 完成，但我正在寻找 CSS 解决方案。

Answer 1

没有一种直接的方法可以用纯 CSS 做你想做的事情，但是有一个很好的创造性方法来解决这个问题 http://css-tricks.com/responsive-data-table-roundup/

**编辑:更具体地说，也许最容易适用于您的情况的是 ZURB 的响应表技术，它只需要将文件 reponsive-tables.js 和 responsive-tables.css 链接到您的 HTML 文档，然后将适当的类名添加到您的table 元素。您可以在 http://zurb.com/playground/responsive-tables 阅读更多相关信息并下载文件。 .