如果需要，请添加溢出 - CSS等效于IF语句

Question

在此小提琴中：https：//jsfiddle.net/9erlby1o/4/，使用JS，如果需要的话，我会添加溢出属性。如果我的桌子容器小于表的宽度。这是在以下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中进行类似的事情。

我受到复选框黑客的影响，这意味着是否语句，但我无法访问CSS中元素的属性，因此我想看看如何以及是否可以在此上下文中使用它。

最后，我想知道为什么在这种情况下我应该比JavaScript更喜欢CSS。（我能认为的唯一可能的原因是，由于CSS使用是不可避免的，因此应该能够处理应用程序的所有样式。但是我可能是错误的）

Answer 1

您可以在表的容器上使用overflow: auto;属性来实现此目的。如果子元素的大小大于父元素的大小，则此属性会自动添加卷轴。

您应该为此使用CSS，因为您不想编写多行JS函数来实现CSS中的一条线可以做到的。希望这对您有帮助。