Reputation: 4102
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;
}
I would like every td
to be 200px wide and .foo
to get a vertical scrollbar.
Instead the table gets shrunk to the size of .foo
and the td
shrink to fit the space available.
What am I doing wrong?
Upvotes: 0
Views: 105
Reputation: 8301
Setting it to min-width
instead of width
should do the trick.
td {
border: 1px solid #000;
min-width: 200px;
}
Upvotes: 3