设置表格单元格内容的最大高度

我有一张表格，它应该总是占据屏幕高度的一定百分比。大多数行的高度是固定的，但我有一行应该伸展以填充可用空间。如果该行中某个单元格的内容溢出了所需的高度，那么我会使用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

设置表格单元格内容的最大高度

回答

相关问题