表格和父div之間的關係

-1

所以我有一個表格裏面的div，我沒有指定任何寬度。對於包含大量內容的表格，表格寬度似乎超過了父div的寬度。爲什麼會發生？我如何做到這一點，以便表格寬度始終是父div的某個百分比？表格和父div之間的關係

2013-07-10 praks5432

你的div是否被聲明爲float？ – Mik378

我建議提供更多關於你已經嘗試過的內容的信息，例如，你想要完成什麼的草圖。 – Sikian

您可能會在不知不覺中提出錯誤的問題，您提供的信息越多，您收到的答案就越好。 –

爲表格設置一個百分比寬度，並確保您的CSS沒有在別處聲明div的寬度。仔細檢查你的HTML，確保你正確地嵌套了表格並關閉了你的div標籤。事情是這樣的：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Whatever</title> 
    </head> 
    <body> 
    <div> 
     <table><!--all your table stuffs--></table> 
    </div> 
    </body> 
</html>

CSS：

div{ 
    width: 90%; 
} 

table { 
    width: 90%; 
}

類是解決這個問題的好辦法，但上面的代碼將確保您的股利是頁面寬度的90％，而桌子90％的div寬度（允許邊距，填充等）。

來源

2013-07-10 23:08:01 mikedugan

這就是我想要的。謝謝 – praks5432

如果包含的元素的內容不會中斷（例如，長連續的文本，大圖像等），上面的代碼將不起作用。你需要設置'table-layout'，默認爲'auto'。 – nathanchere

CSS是你的朋友。

<table style="table-layout:fixed">

這將確保表格元素在寬度而不是內容中具有最終發言權。

強制性填鴨式例如：

<style> 
#sampleTable { 
    table-layout:fixed; 
    width:80%; 

    background-color:#99F; 
} 

#container { 
    width:500px; 

    background-color:#F99; 
} 
</style> 

<div id="container"> 
    <table id="sampleTable"> 
     <tr><td>Exampleofreallylongtextwhichshouldbreaklayoutnormally</td></tr> 
    </table> 
</div>

在那個例子中的表應該總是400個像素（父的500像素的80％）。典型的填充，邊距等警告仍然適用。

您可能還需要考慮word-wrap和overflow以確定如何處理通常會推出表格大小的內容。

來源

2013-07-10 23:08:11 nathanchere

和內聯CSS是你的敵人;） – mikedugan

這是一個快速問題的簡單例子。 – nathanchere

只是指出了OP，而不是試圖嘮叨你 – mikedugan

表格和父div之間的關係

回答

相關問題