スクロールコンテナ内の固定レイアウトテーブルで定義済みの幅を使用しない

Question

固定レイアウトのテーブルを配置し、スクロール可能なコンテナに列幅を固定する必要があります。表とその単一の列は、colgroupセクションで定義された領域を使用する必要があります。

<div class="scroll-container"> 

    <table> 
    <colgroup> 
     <col width="100px"> 
     <col width="100px"> 
     <col width="50px"> 
    </colgroup> 

    <tr> 
     <td>width &lt; 100px</td>  
     <td>width &lt; 1 100px</td> 
     <td>width &lt; 150px</td> 
    </tr> 
    </table> 

</div> 

そして、このCSS：：私は反対のことを達成したいのに対し、

div.scroll-container{ 
    width : 200px; 
    height : 90px; 
    background-color : #ddd; 
    overflow-x: scroll; 
} 

table{ 
    table-layout: fixed; 
} 

td{ 
    border : 1px solid black; 

} 

列の幅が縮小しているとのdivコンテナがスクロールされていない

これはhtmlです。

のJSフィドル：https://jsfiddle.net/n337p1ck/1/

Answer 1

あなただけ追加する必要があります。

width:100%; 

div.container{ 
 
    width : 260px; 
 
    height : 70px; 
 
    background-color : #ccc; 
 
} 
 

 
div.scroll-container{ 
 
    width : 200px; 
 
    height : 90px; 
 
    background-color : #ddd; 
 
    overflow-x: scroll; 
 
} 
 

 
table{ 
 
    table-layout: fixed; 
 
    width:100%; 
 
} 
 

 
td{ 
 
    border : 1px solid black; 
 
    
 
}

<div class="container"> 
 

 
    <table> 
 
    <colgroup> 
 
     <col width="100px"> 
 
     <col width="100px"> 
 
     <col width="50px"> 
 
    </colgroup> 
 

 
    <tr> 
 
     <td>width = 100px</td>  
 
     <td>width = 100px</td> 
 
     <td>width = 50px</td> 
 
    </tr> 
 
    </table> 
 

 
</div> 
 

 
<hr/> 
 

 
<div class="scroll-container"> 
 

 
    <table> 
 
    <colgroup> 
 
     <col width="100px"> 
 
     <col width="100px"> 
 
     <col width="50px"> 
 
    </colgroup> 
 

 
    <tr> 
 
     <td>width &lt; 100px</td>  
 
     <td>width &lt; 1 100px</td> 
 
     <td>width &lt; 150px</td> 
 
    </tr> 
 
    </table> 
 

 
</div>