大桌子，周圍的div與背景不會重複

我有一個1000px寬的頁面，在一個表中保存輸出，該表比頁面的其餘部分寬得多。我沒有水平滾動讀取所有數據的問題，但是像頁眉和頁腳這樣的周圍div的背景並沒有重複出現在大表中。大桌子，周圍的div與背景不會重複

我讀了一些關於將「display：inline-block」添加到大表格周圍的div的提示，但是我仍然沒有找到解決方案。

非常感謝幫助。

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

頭div的背景被重複，因爲我有圖像設置爲BODY的背景而不是在「頭」分區。然而，「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%; 
}

來源

2012-01-23 user1165358

可能您的頁眉和頁腳div只與頁面一樣寬。使用Firebug或其他開發人員洞察，點擊你想要顯示的部分，看看它是你期望的頁眉或頁腳div元素。 –

謝謝馬特。目前給我提出問題的兩個div目前設置爲'寬度：100％'。我可以增加，但內容被推到左邊。 – user1165358

的100％的寬度附加到你的身體

來源

2012-01-23 16:46:03

謝謝Jannis，嘗試過但沒有看到任何改變。 – user1165358

這聽起來像你只需要一個滾動的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>

來源

2012-01-23 16:48:28 mrtsherman

謝謝。這工作。但客戶端實際上希望在整個頁面滾動時正常顯示錶格。這就是爲什麼我需要這些div的背景重複。我知道這聽起來不太合適。 – user1165358

@ user1165358 - 啊，我現在明白了。是的，這個「bug」讓我發瘋。我偶爾看到它，我永遠不會記得修復。我認爲在某處添加最小寬度是可以的。讓我想一想... – mrtsherman

@ user1165358 - 好的，我挖掘瞭解決這個問題的舊問題，但我仍然不喜歡解決方案。基本上，你將最小寬度添加到主體並將其設置爲等於表格的寬度。但是這取決於你有一些想法是什麼寬度的表。如果你需要，我可以給你一個JS解決方案。我不知道，但我不能想到別的。 http://jsfiddle.net/XXhzp/1/ – mrtsherman

嘗試在頁面添加周圍的一切都有div容器。據推測，該div將佔用子表的寬度，然後將其寬度賦予其他div，如果它們設置爲100％。

來源

2012-01-23 16:49:41 skybondsor

大桌子，周圍的div與背景不會重複

回答

相關問題