在html表中設置max-height元素

Question

我意識到這個問題可能已被要求死亡，但我找到的答案似乎都沒有效果。 我有一個ASP轉發器控件，我已經將ItemTemplate設置為一個包含兩行的簡單表。

填充行時，我希望行保持我設置的高度，而不是增長到內容的大小。

我試過設置style="max-height:100px; overflow:auto"; 在表上，表行和表數據沒有做任何事情。

如何確保我的轉發器模板始終具有相同的高度，而不是其內容的高度？

Answer 1

我想你需要像這樣的css解決方案：

table{
  width:200px;
  table-layout:fixed;
}

tr{
   white-space:nowrap;   
}

td {
  height:20px;
  white-space:inherit;
  width:100px;
  overflow:hidden;
}

固定表格布局：水平布局僅取決於表格的寬度和列的寬度，而不取決於單元格的內容。 允許瀏覽器比自動表格布局更快地布置表格。

white-space：nowrap：空格的序列將折疊成一個空格。 文本永遠不會換行到下一行。 文本繼續在同一行，直到a
遇到標記

overflow：hidden：溢出被剪切，其余內容將不可見

適用於大多數現代瀏覽器。

在這里小提琴

Answer 2

你的CSS應該是{height：100px; max-height：100px！important; 溢出：隱藏; }

• 首先它將設置高度
• 然后它將設置最大高度 - 你想要保持這一點。 它還會告訴瀏覽器這比以前的高度設置更重要。 你只設置它以確保IE保持一致，因為IE8和更低版本根本不讀取最大高度，或者最多不能讀取。
• 最后，溢出應該是“隱藏”，這樣你就會隱藏內容。 除非那不是你想做的事情？

如果你想要滾動條，我擔心TD或TR不是最好的方法。 你需要在每個TD中放一個div，然后將上面的CSS設置為。 換句話說，您需要更多嵌套。

Answer 3

確保將這些CSS屬性（特別是overflow：hidden）應用於重復的父塊元素。 如果父元素被展開並且對內聯元素執行它不會影響它，那么對子元素執行它將沒有用，因為內聯元素必然使用其內容的大小。