html - Change width of TABLE based on its TD cells -

i looking way specify table's width specifying widths of tds.

in following scenario (try live on jsfiddle) can see have specified width of each td 100px , expected 300px table (and horizontal scrollbar div) in practice browsers give them width of 63px (that's table's width divided 3)

is there way make tds determine width of table , not other way round? far have tried different values of table-layout, display, overflow td , table without success.

the html:

<div>     200px     <table>         <tr>             <td>100px</td>             <td>100px</td>             <td>100px</td>         </tr>     </table> </div> 

and minimal css:

div {     width: 200px;      height: 300px;      border: solid 1px red;       overflow-x: scroll; }  td {     width:100px;      border: solid 1px #000; }  table {      border-collapse: collapse; } 

a simple solution make td's content 100px wide.

<div>     200px     <table>         <tr>             <td><div class="content">100px</div></td>             <td><div class="content">100px</div></td>             <td><div class="content">100px</div></td>         </tr>     </table> </div>  .content {     width: 100px; }