Html 摆脱固定宽度/流体混合布局中的滚动条

我的问题可以通过这把小提琴来证明：

标题
导航
导航
不要尝试表格。这是您案例中的原始结构。对需要固定宽度的td使用宽度属性。其余的两个将平等地分享剩余的空间

    <div>
<table style="width:100%" border="1">
    <thead>
    <th colspan="4">This is header</th>
    </thead>
    <tbody>
    <tr>
    <td width="10%">col1</td>
    <td width="20%">col2</td>
    <td>col3</td>
    <td>col4</td>
    </tr>
    </tbody>
</table>
</div>


这是标题
可乐
可乐
可乐
可乐
谢谢您的回答。我不想使用表格，因为它不是我要显示的表格数据：-）不过我认为这是最后的选择。
    <div>
<table style="width:100%" border="1">
    <thead>
    <th colspan="4">This is header</th>
    </thead>
    <tbody>
    <tr>
    <td width="10%">col1</td>
    <td width="20%">col2</td>
    <td>col3</td>
    <td>col4</td>
    </tr>
    </tbody>
</table>
</div>