表具有固定的列寬，無論容器的

Question

https://jsfiddle.net/oo73ohtr/

HTML：

<div class="foo"> 
    <table> 
    <tr> 
     <td>bar</td> 
     <td>baz</td> 
    </tr> 
    </table> 
</div> 

CSS：

.foo { 
    width: 300px; 
    overflow: auto; 
} 
td { 
    border: 1px solid #000; 
    width: 200px; 
} 

我想每td是200像素寬和.foo獲得垂直滾動條。

取而代之的是表被縮小到.foo的大小，而td縮小到適合可用空間。

我在做什麼錯？

Answer 1

將它設置爲min-width而不是width應該做的伎倆。

td { 
    border: 1px solid #000; 
    min-width: 200px; 
}