I think this is what you are after:
table {
border-collapse:separate;
border-top: 3px solid grey;
min-width: 100%;
}
This...
- Makes the table the width of the container
- Allows the table to expend to a size larger than the container
- Results in scroll bars if the width is greater than the container
This doesn't force the cells to be 900px
despite not having content, you could force this by wrapping the cell contents in an element with a minimum width:
<div class="container">
<table>
<tr>
<td class="headcol">1</td>
<td class="long">ZOMG</td>
<td class="long"><div>ZOMG</div></td>
</tr>
</table>
</div>
CSS
table {
border-collapse:separate;
border-top: 3px solid grey;
table-layout: fixed;
}
td {
margin:0;
border:3px solid grey;
border-top-width:0px;
white-space:nowrap;
}
.container {
width: 600px;
overflow-x:scroll;
overflow-y:visible;
border: 1px solid red;
padding: 10px;
}
.long {
background:yellow;
letter-spacing:1em;
display:
}
.long div {
min-width: 900px;
}