設置表格單元格內容的最大高度

我有一張表格，它應該總是佔據屏幕高度的一定百分比。大多數行的高度是固定的，但我有一行應該伸展以填充可用空間。如果該行中某個單元格的內容溢出了所需的高度，那麼我會使用overflow隱藏內容。設置表格單元格內容的最大高度

不幸的是，表和行不尊重最大高度屬性。（這是W3C規範）。當單元格中文本太多時，表格變得更高，而不是堅持指定的百分比。

如果我爲像素指定一個固定的像素高度，我可以得到表格單元格的行爲，但是這會破壞讓它自動拉伸以填充可用空間的目的。

我試過使用divs，但似乎無法找到神奇的公式。如果我用display：table，：table-row和table-cell，divs就像表格一樣。

任何關於如何在桌面上模擬最大高度屬性的線索？

<head> 
    <style> 
     table { 
      width: 50%; 
      height: 50%; 
      border-spacing: 0; 
     } 
     td { 
      border: 1px solid black; 
     } 
     .headfoot { 
      height: 20px; 
     } 
     #content { 
      overflow: hidden; 
     } 
    </style> 
</head> 
<body> 
<table> 
    <tr class="headfoot"><td>header</td></tr> 
    <tr> 
     <td> 
     <div id="content"> 
      put lots of text here 
     </div> 
     </td> 
     <tr> 
    <tr class="headfoot"><td>footer</td></tr> 
</table> 
</body>

來源

2011-08-12 ccleve

你能畫顯示你正在努力使整體佈局簡單的圖畫？ – thirtydot

如果您將代碼粘貼到HTML頁面中，您會看到它，但表格佔用屏幕高度的50％以上。它應該只有50％。在內容標籤中放置大量文字。 – ccleve

可能重複的[如何設置表格的最大高度？]（http://stackoverflow.com/questions/13667941/how-to-set-maximum-height-for-table-cell） – vaultah

我們終於找到了各種答案。首先，問題：表格總是圍繞內容進行調整，而不是強制內容適合表格。這限制了你的選擇。

我們通過設置內容div來顯示：none，讓表格大小本身，然後在javascript中將內容div的高度和寬度設置爲封閉td標籤的內部高度和寬度。顯示內容分區。重新調整窗口大小時重複該過程。

來源

2011-08-15 18:50:09 ccleve

+12

什麼是CSS，CSS應該具備這種能力。 – LenPopLilly

@ccleve你可以請一個jsfiddle工作代碼。我無法準確理解你做了什麼。我很長時間以來都面臨同樣的問題。 – ApurvG

也許不能跨瀏覽器，但我設法得到這個：http://jsfiddle.net/QexkH/

基本上它需要一個固定高度的頁眉和頁腳。並絕對定位表格。

table { 
     width: 50%; 
     height: 50%; 
     border-spacing: 0; 
     position:absolute; 
    } 
    td { 
     border: 1px solid black; 
    } 
    #content { 
     position:absolute; 
     width:100%; 
     left:0px; 
     top:20px; 
     bottom:20px; 
     overflow: hidden; 
    }

來源

2011-08-12 20:47:56

有趣的想法，我沒有考慮職位：絕對。雖然沒有在Firefox上工作。 – ccleve

這需要一個圍繞表格單元內容的包裝div：如果這是一種可能性，只需設置包裝div的高度就更容易 – user568458

只需將標籤放在TD內部的div中，並將高度和溢出量放在下面。

<table> 
<tr> 
    <td><div style="height:40px; overflow:hidden">Sample</div></td> 
    <td><div style="height:40px; overflow:hidden">Text</div></td> 
    <td><div style="height:40px; overflow:hidden">Here</div></td> 
</tr> 
</table>

來源

2012-08-04 16:33:47 keithics

這是很容易的部分，但是如果你不能訪問HTML，只能訪問CSS？ – vsync

回答比使用大量的js更容易。爲什麼在編寫網頁時不能訪問html？ –

我也有這個問題，就像@vsync一樣，我使用的是Kendo UI Grid，並且我無法很輕鬆地控制表格中的HTML。我想我可以製作一個行模板或一個列模板，它們都允許我輸入自己的HTML。我可以看到你可以在哪裏用其他不允許模板化的框架/系統運行。 – HK1

我發現!!!，在表CSS td{height:60px;}作品相同的CSS td{min-height:60px;}

我知道的情況，當細胞高度很糟糕。這個javascript解決方案不需要隱藏溢出。

對於使用JavaScript限制所有單元格或行的最大高度表：

這個腳本是良好的水平溢流表。

此腳本每次增加表格寬度300px（最大4000px），直到行縮小到最大高度（160px），並且您還可以根據需要編輯數字。

var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth; 
while (row = table.rows[i++]) { 
    while (row.offsetHeight > 160 && j < 4000) { 
     j += 300; 
     table.style.width = j + 'px'; 
    } 
}

來源：HTML Table Solution Max Height Limit For Rows Or Cells By Increasing Table Width, Javascript

來源

2015-08-11 01:51:12

我已經解決只是用這個插件：http://dotdotdot.frebsite.nl/

它會自動設置一個最大高度爲目標，並增加了三個點

來源

2016-02-25 13:09:19 ShinDarth

我有與我創建的表格佈局相同的問題。我使用了Joseph Marikle的解決方案，但也使其適用於FireFox，並添加了一種表格式樣，以提高測量效果。純粹的CSS解決方案，因爲使用Javascript似乎完全沒有必要和過度殺傷。

HTML

<div class='wrapper'> 
    <div class='table'> 
     <div class='table-row'> 
      <div class='table-cell'> 
       content here 
      </div> 
      <div class='table-cell'> 
       <div class='cell-wrap'> 
        lots of content here 
       </div> 
      </div> 
      <div class='table-cell'> 
       content here 
      </div> 
      <div class='table-cell'> 
       content here 
      </div> 
     </div> 
    </div> 
</div>

CSS

.wrapper {height: 200px;} 
.table {position: relative; overflow: hidden; display: table; width: 100%; height: 50%;} 
.table-row {display: table-row; height: 100%;} 
.table-cell {position: relative; overflow: hidden; display: table-cell;} 
.cell-wrap {position: absolute; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%;}

你需要圍着桌子的包裝，如果你想表尊重百分比高度，否則你可以設置表元件上的像素高度。

來源

2016-06-16 15:47:13 cellen

這不是純粹的CSS解決方案。你用'div'複製你的表格。 –

圍繞它的另一種方式，可能/可能不適合，但肯定是最簡單的：

td { 
    display: table-caption; 
}

來源

2017-03-25 06:32:54 zak

這個答案會從*它的作用*的描述中受益。 – TylerH

它umm。將顯示設置爲ahhh table-caption：} – zak

很明顯，但是對代碼有什麼影響？換句話說，*爲什麼*設置顯示值爲table-caption解決了OP的問題？良好的答案提供瞭解決方案和解釋。 – TylerH

設置表格單元格內容的最大高度

回答

相關問題