CODEWITHSUNDEEP
htmlcss
dave
dave

Reputation: 4102

Table with fixed column width, regardless of container

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

Answers (1)

Keiwan
Keiwan

Reputation: 8301

Setting it to min-width instead of width should do the trick.

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

Upvotes: 3

Related Questions