表格不想伸展div

我在<div>標籤內有一個<table>標籤，該標籤不需要跨越需要的時間。我需要在px中指定一個寬度爲<table>以跨度，並因此導致它所在的容器滾動。否則，<table>只跨越100％的寬度，即<div>的寬度。表格不想伸展div

我的例子如下：

<div style="width:880px; overflow:scroll;"> 
    <table> // I need to explicitly specify a width for it, otherwise it just span 100% which is incorrect 
     <tr><td></td><td></td><td></td></tr> 
    </table> 
</div>

我已經爲所有的<td>標籤指定我的CSS內的寬度。

我不明白爲什麼<table>無法確定它是自己的寬度，或只是尊重所有<td>標籤的寬度。

來源

2011-03-22 Anriëtte Myburgh

您是否正在嘗試使用表格進行佈局？不是一個好主意。手動控制表格的寬度通常是頭痛的事情，因爲表格的_point_是它的寬度是由它的列的寬度決定的，而寬度又取決於單元格的寬度。 – 2011-03-22 17:20:18

我需要它是表格，使用格爲格將讓我生氣。重點是我給它的寬度爲單元格，但它忽略它們。 – 2011-03-22 17:23:34

你可以用[jsFiddle]（http://jsfiddle.net/）創建一個完整的測試用例，包括CSS嗎？ – thirtydot 2011-03-22 17:33:26

您確定沒有任何意外的CSS應用於表格嗎？默認情況下，該表只擴展以容納其列。

<div style="width:880px; overflow:scroll; background-color: green;"> 
<table style="background-color: red;"> 
    <tr> 
     <td>one</td> 
     <td>two</td> 
    </tr> 
</table> 
</div>

使用此代碼，可以看到紅色的表僅是一樣大的公司相對於綠格列只要沒有其他的CSS參與。

使用類似Firebug或IE的開發工具（F12）的工具來查看table元素實際上應用了哪些樣式。

See the example here.

來源

2011-03-22 17:28:03

是的，我確定，我主要使用Safari上的Web Inspector，除了我指定的CSS樣式外，沒有任何應用於單元格。它只是忽略它們。不幸的是我不能張貼截圖，但我可以告訴你，我不知道爲什麼會發生這種情況。 – 2011-03-22 18:04:49

嘗試在你的餐桌上td設置white-space: nowrap;和傾倒大量的每個TD你將開始看到你的DIV滾動條中的文本。

來源

2011-03-22 17:57:36

謝謝，這有幫助，但有些細胞現在比其他細胞更寬，我需要它們的寬度相同，顯然，沒有任何換行符會到達下一行，所以這並不能解決我的問題。 – 2011-03-22 18:03:16

取決於您在每個單元格中的文本，請嘗試在表中的所有td上設置100％的寬度。附： upvote將不勝感激，如果你發現答案有用。 – 2011-03-22 18:05:57

我沒有使用它，但沒問題。 – 2011-03-22 18:09:33

表格不想伸展div

回答

相關問題