具有固定列宽的表，无论容器如何

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宽度为200px，.foo得到一个垂直滚动条。

相反，该表缩小到.foo的大小，td缩小以适应可用空间。

我做错了什么？

Answer 1

将其设置为min-width而不是width应该可以解决问题。

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