将div宽度扩展到具有大量行并导致垂直滚动的同级表的宽度 [英] Expand a div width to the width of the sibling table which has a lot of rows and causes vertical scroll
问题描述
我有一个表有很多列，因此导致垂直滚动。如何使表的div同级扩展到该表的全部宽度。
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'>
foobarbaz
</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>
正如你将看到的，div宽度只等于body的宽度。
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.
感谢
推荐答案
您可以在另一个 div 中包含 div 和 code>，并给予此 div float：left 或 display：inline -block ：
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>
您的原始代码： http://jsfiddle.net/9yKPT/
修正为 float：left ： http://jsfiddle.net/9yKPT/1/
修正为 display：inline-block ： http://jsfiddle.net/9yKPT/2/
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/
这篇关于将div宽度扩展到具有大量行并导致垂直滚动的同级表的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
