javascript - 如果需要，添加溢出——相当于 if 语句的 CSS

Question

在这个 fiddle 中:https://jsfiddle.net/9erLby1o/4/ ，如果需要，我会使用 JS 添加溢出属性。 如果我的 table 的容器小于 table 的宽度。 这是在以下 js 行中完成的:

for(var el=0; el<document.querySelectorAll("table").length; el++){
    if (document.querySelectorAll("table")[el].parentElement.offsetWidth < document.querySelectorAll("table")[el].offsetWidth ){
        document.querySelectorAll("table")[el].parentElement.classList.add("overflow");
    }
}

我想知道在纯 CSS 中是否可以实现类似的东西。

我有点受到 checkbox hack 的影响，它暗示了 if 语句，但我无法访问 css 中元素的属性，所以我想看看如何以及是否可以在这种情况下使用它。

最后我想知道为什么在这种情况下我应该更喜欢 CSS 而不是 javascript。 (我能想到的唯一可能的原因是，由于 CSS 的使用是不可避免的，它应该能够处理应用程序的所有样式。但我可能是错的)

Answer 1

您可以在表的容器上使用 overflow: auto; 属性来实现这一点。如果子元素的大小变得大于父元素的大小，此属性会自动添加滚动条。

你应该为此使用 css，因为你不想编写多行 JS 函数来实现你可以用 css 中的一行来做的事情。希望对您有所帮助。