必要に応じてオーバーフローを追加します。if文のCSS相当物

Question

このフィドルでは、https://jsfiddle.net/9erLby1o/4/、JSを使用して必要に応じてオーバーフロープロパティを追加します。 テーブルのコンテナがテーブルの幅より小さい場合。 これは、次のjsラインで行われます。私はそのようなことは、純粋な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"); 
    } 
} 

。

if文を意味するcheckbox hackの影響を少し受けますが、cssの要素のプロパティにアクセスできないため、このコンテキストでどのように使用できるかを見たいと思います。

最後に、このシナリオではJavaScriptがCSSよりも優先される理由を知りたいと思います。 （私が考えることができる唯一の理由は、CSSの使用は避けられないため、アプリケーションのすべてのスタイルを処理できるはずです）。

Answer 1

overflow: auto;プロパティは、これを達成するためのテーブル。子要素のサイズが親要素のサイズより大きくなると、このプロパティはスクロールバーを自動的に追加します。

cssで1行で何ができるのかを達成するために、複数行のJS関数を記述したくないので、これにはcssを使用する必要があります。これがあなたを助けることを願ってください。