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;
}

这里有一个链接，上面有我正在做的一个例子：

LINK jsfiddle

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

Answer 1

您无法使用<div>上的边框或任何块格式设置属性执行此操作，请参阅此处的精简版：http://jsfiddle.net/MQ9MJ/1/

如果您将这些样式移到<table>和<td>，它将起作用： http://jsfiddle.net/MQ9MJ/3/

Answer 2

你需要摆脱overflow：hidden属性。使用overflow：auto，然后你的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;
}

具有动态宽度的CSS和DIV

3 个答案: