max-widthを使用してテーブルセルのオーバーフローを制御する

table-cellプロパティを使用して2列のレイアウトを作成するとします。 左の列は使用可能な幅全体を占めますが、この場合、右の列には2つのオプションがあります。

• この列に固定幅を与えます。
• 最小コンテンツ幅→ 最小コンテンツ幅（MCW）に等しくなります。

列のレイアウト方法には1つの重要なマイナス→があります。ブロック内のコンテンツがスコープを超えた場合、この場合のMCWの方が大きいため、幅で指定された制限は影響しません。 左の列を幅全体に引き伸ばしたい場合は、幅を100％に設定する必要があります。 したがって、最大幅：100％; MCWはすでにこの値より高いため、結果は得られません。 その結果、設定した制限に関係なく、レイアウト全体がコンテナを超えて拡張されます。



右側に固定列オプションがあるレイアウトの例を次に示します。

<div class="container"> <div class="leftBlock">   </div> <div class="rightBlock">   </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 .leftBlock, .rightBlock { display: table-cell; vertical-align: top; } .leftBlock { width: 100%; } .rightBlock { width: 200px; max-width: 200px; min-width: 200px; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Jsfiddleの例



ご覧のとおり、これまでのところ問題はありません。 次に、コンテナの幅から右側の列を引いた値を超える列要素を左に追加します。



Jsfiddleの例



コンテナの幅が限られているにもかかわらず、左側のセルが引き伸ばされ、スクロールが表示されました。 ハックを紹介する時が来ました。 先ほど言ったように、max-width：100％; ここでは効果がありませんが、max-width：0を設定すると、 コンテナの幅と右側のセルを考慮して、セルは使用可能な幅全体を占有します。 残念ながら、仕様はこの効果を明確にしませんが、すべてのブラウザで同じように機能します。

overflow：hidden;を追加することを忘れないでください。 そしてword-wrap：break-word;、それ以外の場合、コンテンツはコンテナからクロールされます。



jsfiddleの最後の例



固定されていない右側の列の2番目のケースでは、幅パラメーターを指定しない場合のみ、すべてがまったく同じになります。