css - 动态添加列的css溢出自动

Question

表、内部 div 和字段集在没有时从外部 div 扩展。cols 增加。

http://jsfiddle.net/Fgj6Y/

1. 外部 div、字段集和内部 div 宽度应该是完整的。
2. td 应该有一个固定的宽度。
3. 溢出的列应该被隐藏并且可以通过滚动查看。

我很难做到这一点。不想设置固定宽度，因为这对我来说似乎不是一个好方法。尝试了所有/每个容器的溢出、空白道具。

<div style="border:1px solid gray;padding:1%">
        <fieldset style="border:1px solid red;border-radius:5px">
                <div style="overflow-x:auto;border:1px solid green">
                        <table width="100%" border="1" bordercolor="blue">
                                <tr>
                                        <td>Casual Leave</td>
                                        <td>AnnualLeave</td>
                                        <td>SickLeave</td>
                                        <td>Compassionate Leave</td>
                                        <td>Maternity Leave</td>
                                        <td>Another Leave</td>
                                        <td>Some Other Leave</td>
<td>Casual Leave</td>
                                        <td>AnnualLeave</td>
                                        <td>SickLeave</td>
                                        <td>Compassionate Leave</td>
                                        <td>Maternity Leave</td>
                                        <td>Another Leave</td>
                                        <td>Some Other Leave</td>

                                <tr>
                        </table>
                </div>
        </fieldset>
</div>

Answer 1

你不想overflow-x为外部div设置吗？

<div style="border:1px solid gray;padding:1%; overflow-x: auto;">
    <fieldset style="border:1px solid red;border-radius:5px">
        ...

这是更新的小提琴：http: //jsfiddle.net/Fgj6Y/3/

重要提示：避免使用内联样式。