html - 表列的动态溢出x？

Question

我正在尝试制作一个表格，其中所有列的宽度都已设定，但最后一列除外，它占用的宽度不确定。在最后一列中，我有另一个表格，其中包含我希望滚动的设置宽度的更多内容。

对于高分辨率的用户，所有内容都将可见。对于分辨率较小的用户，我希望最后一列的内容可以滚动。

我正在尝试创建的示例:

View full screenshot

我当前的代码:

<style>
table {
    border-collapse:collapse;
}

td {
    font-family:arial;
    font-size:11px;
    text-align:center;
    border:1px solid #cccccc;
    height:50px;
    vertical-align:middle;
}

table.innertable td {
    background-color:#eeeeee;
    border-top:0;
    border-bottom:0;
    border-left:0;
}

</style>

<table cellspacing="0" border="0" cellpadding="0" style="width:100%;">

<tr>
    <td style="width:100px;">&#8592; 100 px &#8594;</td>
    <td style="width:200px;">&#8592; 200 px &#8594;</td>
    <td style="width:200px;">&#8592; 200 px &#8594;</td>
    <td style="width:200px;">&#8592; 200 px &#8594;</td>
    <td>&#8592; The rest of the space &#8594;</td>
</tr>

<tr>
    <td style="width:100px;">&#8592; 100 px &#8594;</td>
    <td style="width:200px;">&#8592; 200 px &#8594;</td>
    <td style="width:200px;">&#8592; 200 px &#8594;</td>
    <td style="width:200px;">&#8592; 200 px &#8594;</td>
    <td>
        <div style="overflow-x:scroll;">
        <table cellspacing="0" border="0" cellpadding="0" class="innertable">
        <tr>
        <td style="width:200px;">&#8592; 200 px &#8594;</td>
        <td style="width:200px;">&#8592; 200 px &#8594;</td>
        <td style="width:200px;">&#8592; 200 px &#8594;</td>
        </tr>
        </table>
        </div>
    </td>
</tr>

</table>

Answer 1

限制宽度怎么样？

http://jsfiddle.net/PTjqL/4/ <- 像这样。

编辑:更改为 <div style="overflow-x:scroll; width: 200px;"> .我已经限制了 div 的宽度。如果你不限制它，它会尽可能地覆盖最大尺寸，它永远不会溢出-x ;)