在桌子上设置最大高度

Question

我想设计一个有一些表格的页面。看来造型表更加痛苦，那么应该是。

问题是以下几点。这些表格应该有固定的高度，并在底部显示空白区域时（当内容太少时）或垂直滚动​​条时显示太多。再加上这个表有一个不应该滚动的标题。

据我所知，thead不滚动是表的默认行为。拉伸tfoot可以很好地用于填充空白的目的。可悲的是，似乎我可以放在桌子高度上的每一个限制都被高高兴兴地忽略了。我试过

table { 
    height: 600px; 
    overflow: scroll; 
} 

我试过max-height。我试图完全摆放桌子并给出顶部和底部坐标。我试图在Firebug中手动编辑高度，以查看它是否是CSS特性的问题。我也尝试在tbody上设置高度。事实是，无论我的努力如何，表格总是保持其内容的高度。

当然，我可以假表与一个div结构，但它实际上是表，我害怕使用div我可能会遇到一些问题，其中一些列可能无法正确对齐。

我该如何给一张桌子一个高度？

Answer 1

注意this answer is now incorrect。我可能会在稍后回复。

正如其他人已经指出，你can't set the height of a table，除非你把它的显示设置为block，但你会得到一个滚动标题。所以，你要寻找的是设置在单独的tbody和heightdisplay:block：

<table style="border: 1px solid red"> 
    <thead> 
     <tr> 
      <td>Header stays put, no scrolling</td> 
     </tr> 
    </thead> 
    <tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll"> 
     <tr> 
      <td>cell 1/1</td> 
      <td>cell 1/2</td> 
     </tr> 
     <tr> 
      <td>cell 2/1</td> 
      <td>cell 2/2</td> 
     </tr> 
     <tr> 
      <td>cell 3/1</td> 
      <td>cell 3/2</td> 
     </tr> 
    </tbody> 
</table> 

这里的the fiddle。

Answer 2

将display:block;添加到表格的CSS中。 （换句话说..告诉表格像块元素，而不是一个表。）

fiddle here

Answer 3

似乎非常类似于this问题。从这里看来，这应该做的伎俩：

​​

Answer 4

<table style="border: 1px solid red"> 
      <thead> 
       <tr> 
        <td>Header stays put, no scrolling</td> 
       </tr> 
      </thead> 
      <tbody id="tbodyMain" style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll"> 
       <tr> 
        <td>cell 1/1</td> 
        <td>cell 1/2</td> 
       </tr> 
       <tr> 
        <td>cell 2/1</td> 
        <td>cell 2/2</td> 
       </tr> 
       <tr> 
        <td>cell 3/1</td> 
        <td>cell 3/2</td> 
       </tr> 
      </tbody> 
     </table> 

JavaScript部分

<script> 
$(document).ready(function(){ 
    var maxHeight = Math.max.apply(null, $("body").map(function() { return $(this).height(); }).get()); 
    // alert(maxHeight); 
    var borderheight =3 ; 
    // Added some pixed into maxheight 
    // If you set border then need to add this "borderheight" to maxheight varialbe 
    $("#tbodyMain").css("min-height", parseInt(maxHeight + borderheight) + "px");    
}); 

</script> 

请，请参阅如何最大可能的高度设置为您的表身
Fiddle Here

Answer 5

我有一个同事问今天怎么做，这就是我想出的。我不喜欢它，但它是一种方法来做到这一点，没有js和标题尊重。然而，主要缺点是你失去了一些语义，因为没有一个真正的表头。

基本上我把一个表格包装在一个表格中，并通过给它一个max-height使用div作为滚动容器。由于我将表格封装在父表格中，“拼成”了伪首标行，因此表格看起来就像表格尊重它们一样，但实际上，子表格只有相同的行数。

由于滚动条占用空间的一个小问题，子表格列的宽度不会完全匹配。

Live Demo

标记

<table class="table-container"> 
    <tbody> 
     <tr> 
      <td>header col 1</td> 
      <td>header col 2</td> 
     </tr> 
     <tr> 
      <td colspan="2"> 
       <div class="scroll-container"> 
        <table> 
         <tr> 
          <td>entry1</td> 
          <td>entry1</td> 
         </tr> 
         ........ all your entries 
        </table> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

CSS

.table-container { 
    border:1px solid #ccc; 
    border-radius: 3px; 
    width:50%; 
} 
.table-container table { 
    width: 100%; 
} 
.scroll-container{ 
    max-height: 150px; 
    overflow-y: scroll; 
} 

Answer 6

在表，对于代替表的最小细胞高度或行高度使用的CSS height:的min-height:

和

限制在表中的所有单元格或行的最大高度的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

Answer 7

您可以使用下面的CSS做到这一点。

.scroll-thead{ 
    width: 100%; 
    display: inline-table; 
} 

.scroll-tbody-y 
{ 
    display: block; 
    overflow-y: scroll; 
} 

.table-body{ 
    height: /*fix height here*/; 
} 

以下是HTML。

<table> 
<thead class="scroll-thead"> 
      <tr> 
      <th>Key</th> 
      <th>Value</th> 
      </tr> 
     </thead> 
     <tbody class="scroll-tbody-y table-body"> 
      <tr> 
      <td>Blah</td> 
      <td>Blah</td> 
      </tr> 
</tbody> 
</table> 

JSFiddle

Answer 8

使用的div最大高度和周围需要滚动内容分高度。

<tr> 
    <td> 
     <div>content</div> 
    </td> 
</tr> 

td div{ 
    max-height:20px; 
} 

https://jsfiddle.net/ethanabrace/4w0ksczr/