CSS和DIV动态宽度

我需要设置一个div的宽度动态，因为我有一个动态表格，该div中，当它有太多的列，我不能水平滚动底部栏（不是DIV的一个，浏览器的）。CSS和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浏览器上工作。

来源

2013-01-02 abierto

你可以使用jQuery。检查这个主题http://stackoverflow.com/questions/1015669/calculate-total-width-of-children-with-jquery – smefju

我不能这样做，只有与CSS？ – abierto

我不记得我看到的与此类似的SO问题，但我可以发誓解决方案是在和元素中将宽度和高度设置为100％。 – huzzah

不能带有边框或在<div>任何块格式属性做到这一点，在这里看到一个精简版本：http://jsfiddle.net/MQ9MJ/1/

如果将这些风格到<table>和<td> s代替，它会工作： http://jsfiddle.net/MQ9MJ/3/

来源

2013-01-02 15:51:55 skyline3000

好的，但我实际上需要在该DIV中使用我的表格，因为整个网站使用该DIV作为其主要容器。你是否建议将“总计”DIV更改为表格？ – abierto

这是一种方法，但是，我可能只是改变总计有'display：table;'因为你想要一个表格的布局，但实际上并不想在语义上使用一个表格元素。看到这里：http://jsfiddle.net/MQ9MJ/4/ – skyline3000

'display：table;'不要在IE7上工作，我只是测试它...有什么更多的需要做我所需要的？我必须让它在IE7上工作... – abierto

你需要摆脱overflow：hidden属性。使用overflow：auto代替，那么你的div将会滚动。

来源

2013-01-02 15:15:38 omniflash

我不想在酒吧里面有酒吧。当表格变得“更长”时，我需要DIV宽度“增长”。 – abierto

试试这个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; 
}

来源

2013-01-02 15:42:56 Saju

这允许我用浏览器的滚动条滚动表格，但是我的DIV宽度仍然是固定的，而不是动态的。我的主要问题是在我的DIV上有一个可变的宽度。 – abierto

CSS和DIV动态宽度

回答

相关问题