如果需要添加溢出 - if語句的CSS等效

-1

在這個提琴：https://jsfiddle.net/9erLby1o/4/，使用JS我添加如果需要溢出屬性。如果我的表的容器小於表的寬度。這是在下面的JS線來完成：如果需要添加溢出 - if語句的CSS等效

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更喜歡CSS。（唯一可能的原因，我能想到的是，因爲CSS的使用是不可避免的，應該能夠處理應用程序的所有風格，但我可能是錯的）

來源

2016-12-05 partizanos

那麼你不能使用CSS溢出auto？ – epascarello

如何使用媒體查詢？ –

每次添加溢出的問題是，如果你有一個工具提示，它會垂直溢出，因爲你不能只有一個軸溢出。 @epascarello – partizanos

可以使用overflow: auto;屬性的容器上表來實現這一點。如果子元素的尺寸大於父元素的尺寸，則此屬性自動添加滾動條。

你應該使用CSS來做到這一點，因爲你不想寫一個多行JS函數來實現你可以用一個單一的行在CSS中做什麼。希望這可以幫助你。

來源

2016-12-05 13:41:46

謝謝了很多，我已經試過這個，但我的問題是，我的一些表有工具提示，需要退出父母，如果他們在邊界附近 – partizanos

您可以創建一個固定的元素顯示工具提示哪將出現在鼠標指針的座標處。在這種情況下，工具提示不會在桌子內部，因此容器不會垂直溢出。 –

是否可以獲取鼠標座標並僅使用CSS顯示工具提示？ – partizanos

如果需要添加溢出 - if語句的CSS等效

回答

相關問題