設置表格單元格內容的最大高度
[英]Setting max-height for table cell contents
問題描述
我有一張桌子，它應該總是占據屏幕高度的一定百分比。 大多數行的高度都是固定的，但我有一排應該伸展以填充可用空間。 如果該行中單元格的內容溢出所需的高度，我希望使用溢出：隱藏來剪輯內容。
不幸的是，表和行不尊重 max-height 屬性。 （這是在 W3C 規范中）。 當單元格中的文本過多時，表格會變高，而不是固定在指定的百分比上。
如果我為它指定一個以像素為單位的固定高度，我可以獲得表格單元格的行為，但這違背了讓它自動拉伸以填充可用空間的目的。
我試過使用 div，但似乎找不到神奇的公式。 如果我將 div 與 display:table、:table-row 和:table-cell 一起使用，則 div 的行為就像一個表格。
關於如何在桌子上模擬最大高度屬性的任何線索？
<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>
7 個解決方案
解決方案1
73 2012-08-04 16:33:47
只需將標簽放在 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>
解決方案2
17 已采納 2011-08-15 18:50:09
我們終於找到了某種答案。 首先，問題是：表格總是圍繞內容調整大小，而不是強制內容適合表格。 這限制了你的選擇。
我們通過將內容 div 設置為 display:none，讓表格自行調整大小，然后在 javascript 中將內容 div 的高度和寬度設置為封閉 td 標記的內部高度和寬度。 顯示內容 div。 調整 window 的大小時重復此過程。
解決方案3
2 2011-08-12 20:47:56
可能不是跨瀏覽器，但我設法得到了這個： http://jsfiddle.net/QexkH/
基本上它需要一個固定的高度 header 和頁腳。 它絕對定位表格。
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;
}
解決方案4
1 2015-08-11 01:51:12
我發現，！！，在表 CSS td{height:60px;}與 CSS td{min-height:60px;} ;} 的工作方式相同
我知道細胞高度看起來很糟糕的情況。 這個 javascript 解決方案不需要隱藏溢出。
對於使用 Javascript 限制表中所有單元格或行的最大高度：
該腳本適用於水平溢出表。
此腳本每次將表格寬度增加 300 像素（最大 4000 像素），直到行縮小到最大高度（160 像素），您還可以根據需要編輯數字。
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';
}
}
解決方案5
1 2016-06-16 15:47:13
我正在創建的表格布局也有同樣的問題。 我使用了 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%;}
如果您希望表格遵守百分比高度，則需要圍繞表格進行包裝，否則您可以在表格元素上設置像素高度。
解決方案6
0 2016-02-25 13:09:19
我已經解決了使用這個插件： http://dotdotdot.frebsite.nl/
它會自動為目標設置最大高度並添加三個點
解決方案7
-1 2017-03-25 06:32:54
另一種可能/可能不適合但肯定是最簡單的解決方法：
td {
display: table-caption;
}
表格單元的最大高度
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.