爲什麼這個表格單元的行爲如此？

這是td基本CSS：

td { 
    height: 30px; 
    border: 1px solid grey; 
    background-color: rgb(141, 176, 248); 
}

還設有一個30像素的圖像一個細胞。但是，該單元寬度仍爲600px。有誰明白爲什麼？

你要什麼表的樣子？你沒有在單元格上設置任何寬度屬性，所以它正在做它想做的任何事情。 – SteveP 2013-03-07 13:59:59

Id不應以數字字符開頭。但它與你的問題無關。 – Brainfeeder 2013-03-07 14:02:30

@Brainfeeder謝謝，我忘了那個... – 2013-03-07 14:40:33

它與具有內容的td和沒有內容的td有關。

Whenever your td doesn't have any fixed width

由於表有width:100%，並且在大多數的TD的，因此他們對齊到可以忽略不寬內容。但是，只要你給任何td的內容，整個列都會相應地展開以適應整個表格的寬度。

要測試它，甚至只要在其他td中寫一個字，整個列就會被擴展。

你應該做的是提供一個寬度您的預扣稅，以限制此默認擴展」

.ui-droppable 
{ 
    width:50px; 
}

2013-03-07 14:18:08

是的，是有道理的。謝謝。 – 2013-03-07 14:38:32

您將寬度/高度設置爲30px和1px邊框。圖像也有30px寬度。不幸的是，邊框寬度必須包含在寬度中。您必須設置寬度30+2*1px：fiddle

2013-03-07 13:59:31 Imperative

他沒有設置寬度，他確實設置了高度.. – Brainfeeder 2013-03-07 14:03:39

如果你沒有任何寬度設置爲<td>元素和你<table>還沒有任何寬度（所以它默認爲100％）<td> -s會自動補全寬。在你的情況下，這是一個<td>擴大。

在你的CSS文件中設置寬度，問題應該修復。

td { width:30px; }

很明顯，您應該將表格寬度設置爲所有列的總和。或者您可以設置px /％的表格寬度和％列中的寬度。或者你也可以使用javascript/jQuery來使列寬適應其內部的圖像寬度。

2013-03-07 14:10:55 Brainfeeder

回答