在桌子上设置最大高度
我正在devise一个有一些表的页面。 看来，造型表更痛苦，然后应该是。
问题是以下。 表格应该有一个固定的高度，并在底部显示空白 – 当内容太less时 – 或垂直滚动条 – 当显示太多时。 添加到这个表有一个不应该滚动的标题。
据我所知， thead不滚动是表的默认行为。 而拉伸tfoot可以很好地填补空白的目的。 可悲的是，似乎每一个我可以放在桌子上的限制都被忽视了。 我努力了
table { height: 600px; overflow: scroll; }
我已经尝试过max-height 。 我试图将表格放在绝对位置，同时给出顶部和底部的坐标。 我曾尝试手动编辑Firebug中的高度，以查看它是否是CSS特性的问题。 我也试图设置tbody的高度。 事实是，无论我的努力如何， 桌子总是保持其内容的高度 。
当然，我可以伪造一个带有div结构的表格，但实际上它是一个表格，我担心使用div可能会遇到某些列可能无法正确alignment的问题。
我该如何给一张桌子一个高度？
注意 这个答案现在是不正确的 。 我可能会在稍后回来。
正如其他人所指出的，除非您将其显示设置为禁用，否则您无法设置表的高度 ，但是您将获得滚动标题。 所以你要找的就是设置height并单独在tbody上display: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>
这是小提琴 。
添加display:block; 到桌子的CSS。 （换句话说，就是让表格像块元素而不是表格一样）。
在这里拨弄
我有个同事问今天怎么做，这就是我想出来的。 我不喜欢它，但它是一种没有JS的做法，并且有标题。 然而，主要的缺点是你失去了一些语义，因为没有一个真正的表头。
基本上我把一个表格包装在一个表格中，通过给它一个max-height使用一个div作为滚动容器。 由于我把表格包装在一个父表中“拼成”虚假的标题行，所以它看起来好像表尊重它们，但实际上，子表的行数是相同的。
一个小问题，由于滚动条占用空间的子表格列宽度不会完全匹配。
现场演示
标记
<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; }
似乎与这个问题非常相似。 从那里看来，这应该是诀窍：
table { display: block; /* important */ height: 600px; overflow-y: scroll; }
你可以通过使用下面的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
在表中，对于最小表格单元高度或行高使用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表格解决scheme行或单元格的最大高度限制通过增加表宽度，Javascript
<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>
请参考如何设置您的表体的最大可能的高度
小提琴在这里
