css - 大 table ，周围有背景的div不会重复

Question

我有一个 1000 像素宽的页面，它在一个比页面其余部分宽得多的表格中保存输出。我可以水平滚动以读取所有数据，但周围 div 的背景(如页眉和页脚)不会与大表格重复。

我阅读了一些关于将“display:inline-block”添加到大 table 周围的 div 的提示，但我仍然没有找到解决方案。

非常感谢您的帮助。

<div id="top_ad">
</div>
<div id="header">
</div>
<table>
THIS IS THE HUGE TABLE
</table>
<div id="footer">
</div>

header div 的背景重复了，因为我将图像设置为 BODY 的背景而不是“header”div。然而，“top_ad”和“footer”div 的背景停在 1000px。我的 CSS 如下:

body {
background:url(/images/header_background_repeat.jpg) repeat-x 0 110px;
padding:0;
margin:0;
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
color:#262626;
text-align:center;
}

#top_ad {
width:100%;
height:100px;
background: #0f3245;
text-align:center;
padding-top:10px;
}

#footer {
    border-top: 6px solid #C9660D;
    padding-top: 0;
    width: 100%;
}

Answer 1

听起来您只需要一个可滚动的 div 来包含您的表格。此处我使用宽度 100%，但您可能希望使用宽度 = 到页面宽度。

http://jsfiddle.net/XXhzp/

<div id="tablecontainer" style="width: 100%; overflow: scroll;">
    <table>
        <tr><td></td></tr>
        <tr><td></td></tr>
        <tr><td></td></tr>
    </table>
</div>