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

ここに私がしていることの例へのリンクがあります：

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