css - 具有动态宽度的 CSS 和 DIV

Question

我需要设置一个div的宽度动态，因为我在那个div里面有一个动态表格，当它有太多列时，我不能用底栏水平滚动（不是DIV的，浏览器的）。

我的 HTML 文件中有这个：

<div class="total">
    <table border="1">
        <tr>
            <td>row 1, cell 1</td>
            ...
            <td>row 1, cell m</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            ...
            <td>row 2, cell m</td>
        </tr>
        ...
        <tr>
            <td>row n, cell 1</td>
            ...
            <td>row n, cell m</td>
        </tr>
    </table>
</div>​

我的css中有这个：

.total{
position:relative;
top:50px;
margin: 0 auto;
background-color:#eeeeee;
height:auto;
width:auto;
border:2px solid #000;
border-color:rgb(82,115,154);
overflow: hidden;
}

这里有一个链接，其中包含我正在做的示例：

链接 jsfiddle

如何设置“总”div 的宽度动态？这必须适用于 IE7 浏览器。

Answer 1

您不能使用 上的边框或任何块格式属性执行此操作<div>，请在此处查看精简版本：http: //jsfiddle.net/MQ9MJ/1/

If you move these styles to the <table> and <td>s instead, it will work: http://jsfiddle.net/MQ9MJ/3/

Answer 2

您需要摆脱 overflow:hidden 属性。改用溢出：自动，然后您的 div 将是可滚动的。

Answer 3

试试这个 CSS

.total{
     position:relative;
     top:50px;
     margin: 0 auto;
     background-color:#eeeeee;
     height:auto;
     border:2px solid #000;
     border-color:rgb(82,115,154);
     overflow: none;
}
td{
    min-width:50px;
}