如果 table 宽度超过页面，则更改 CSS

Change CSS if table width exceeds page

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

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

只为宽度小于 1024 的屏幕设置 CSS。现在我的目标是当元素的宽度（在我的例子中是 table ) 超出页面宽度。

所以简单地说，我希望 CSS 在我的 table 不适合我的页面时执行。

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

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

我知道 Javascript 可以做到这一点，但我正在寻找 CSS 解决方案。

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

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

阅读更多相关信息并下载文件