Expand a div width to the width of the sibling table which has a lot of rows and causes vertical scroll
I have a table which has a lot of columns and hence causes a vertical scroll. How do I make a div sibling of the table expand to the full width of that table.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<body>
<div style='background: green'>
foobarb开发者_StackOverflow社区az
</div>
<table>
<tr>
<td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
<td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
<td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
<td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
<td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
<td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
<td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
<td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
<td style='background: red'>foobarbazfoobarbazfoobarbazfoobarbaz</td>
</tr>
</table>
</body>
</html>
As you'll see here, the div width is only equal to the width of the body. I need the div width to match the width of the overflowing table.
Thanks
You can wrap both the div and table in another div, and give this div either float: left or display: inline-block:
<div style="float: left">
<div style='background: green'> foobarbaz </div>
<table>
..
</table>
</div>
Your original code: http://jsfiddle.net/9yKPT/
Fixed with float: left: http://jsfiddle.net/9yKPT/1/
Fixed with display: inline-block: http://jsfiddle.net/9yKPT/2/
css : add a ID to div and to table, then do :
var w = setInterval(function() {
var $div = document.getElementById("divID").style.width;
document.getElementById("tableID").style.width = $div;
},1);
加载中,请稍侯......
精彩评论