设置 HTML 表格的最大显示行数
Posted
技术标签:
【中文标题】设置 HTML 表格的最大显示行数【英文标题】：Set maximum displayed rows count for HTML table 【发布时间】：2011-01-08 04:59:00 【问题描述】：拥有动态生成的具有未知行数的 html 表的 JSP 页面。
后端有属性，设置最大行数，例如：max_rows=15。
如何将 HTML 表格的行数限制为 max_rows 值？ 表格的其他部分应该可以通过垂直滚动来访问，这意味着用户可以看到 15 行，如果向下滚动，它将看到表格的其他行。
可以通过计算行的平均高度并使用 div-wrapper 的 max-height 属性来凭经验完成，但我认为这种方法不是很稳定。
因此需要依赖行数。 也许有这种情况的插件或者它是标准的 CSS 或 HTML 解决方案？
【问题讨论】：
一些额外的信息会有用，这是一个动态生成的页面，如果是，什么框架，什么数据源？你的意思是没有滚动的限制，当你有更多的行时会发生什么？ 感谢您的注释，我已将帖子编辑得更清楚 【参考方案1】：将表格放在一个 div 块中，并使用 CSS 指定 div 的高度和溢出属性。
<style type="text/css">
.table_outer height: 15em; overflow: auto;
</style>
<div class="table_outer">
<table>
...table content...
</table>
</div>
这样div有一个固定的高度，当div块的内容太高时浏览器会添加一个滚动条。
我已将高度设置为 15em，对应于 15 * font-height。当使用边框、填充和其他东西时，这个高度是不正确的。但它可以为您的设计更正确地计算（以 px 为单位）。
【讨论】：
哦，我没有看到你已经想到了这个。虽然我确实认为它是稳定的并且被大多数/所有浏览器支持。 是的，它很稳定，但我担心列高可能会因为里面的文字太长而有所不同，这可能会导致一些不准确。 确实如此。您可以使用 javascript 查找前 15 行的高度，添加这些值，修改 div 高度。但这听起来对我来说非常不稳定......【参考方案2】：仅使用 CSS 和 HTML 无法做到这一点，您还需要 javascript。获取前 15 行的高度，并将包装 div 的高度限制为该高度。在 div 上设置 overflow: auto 以获取滚动条。
如果关闭了 javascript，请不要忘记在 div 上设置默认高度作为后备。
【讨论】：
【参考方案3】：这可以通过标准的 HTML、CSS 和一些 javascript 来完成。对于关闭 javascript 的客户端，它也可以优雅地降级。我的意思是，他们只会看到未经滚动条修改的原始表格。试试这样的：
<html>
<head>
<style type="text/css">
table
width: 100%;
border-collapse: collapse;
td
border: 1px solid black;
.scrollingTable
width: 30em;
overflow-y: auto;
</style>
<script type="text/javascript">
function makeTableScroll()
// Constant retrieved from server-side via JSP
var maxRows = 4;
var table = document.getElementById('myTable');
var wrapper = table.parentNode;
var rowsInTable = table.rows.length;
var height = 0;
if (rowsInTable > maxRows)
for (var i = 0; i < maxRows; i++)
height += table.rows[i].clientHeight;
wrapper.style.height = height + "px";
</script>
</head>
<body onload="makeTableScroll();">
<div class="scrollingTable">
<table id="myTable">
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td>Here is some long text that should wrap: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
</table>
</div>
</body>
</html>
这已在 Firefox、Chrome 和 IE 7 中进行了测试，但它应该适用于所有现代浏览器。请注意，每行的内容有多高或每个单元格有多少填充都无关紧要。如果您不想在表格上使用border-collapse:collapse，那么您必须在for循环中添加代码以考虑单元格间距。
如果你有更粗的边框，那么用这个替换javascript函数：
function makeTableScroll()
// Constant retrieved from server-side via JSP
var maxRows = 4;
var table = document.getElementById('myTable');
var wrapper = table.parentNode;
var rowsInTable = table.rows.length;
try
var border = getComputedStyle(table.rows[0].cells[0], '').getPropertyValue('border-top-width');
border = border.replace('px', '') * 1;
catch (e)
var border = table.rows[0].cells[0].currentStyle.borderWidth;
border = (border.replace('px', '') * 1) / 2;
var height = 0;
if (rowsInTable > maxRows)
for (var i = 0; i < maxRows; i++)
height += table.rows[i].clientHeight + border;
wrapper.style.height = height + "px";
其中的 try/catch 处理了 IE 和其他浏览器之间的差异。 catch 中的代码是针对 IE 的。
【讨论】：
看起来很有希望，我会尽快为我的案例测试这个解决方案来写反馈 这有点晚了，但请检查我的回答。我找到了一种不用 javascript 的方法！ @rarrarrarrr 您的解决方案不提供最初要求的滚动...它只是隐藏了额外的行，使它们无法访问。 @DaveS 你是绝对正确的。我在问题中错过了这一点。很抱歉用不正确的答案复活一个老问题。谢谢你指出这一点。我已经用免责声明编辑了我的答案。【参考方案4】：编辑：这实际上并不能解决所提出的问题。我错过了问题中用户需要能够滚动才能查看其余行的部分。哎呀。 所以，我想js确实是需要的。
这实际上可以在没有 javascript 的情况下完成。诀窍是使用nth-child(x):
table
border-collapse: collapse;
tr:nth-child(n + 4)
visibility: hidden;
边框折叠是必需的，因此边框不会超出隐藏行。
这是fiddle。
【讨论】：
你也可以使用 display:none 代替 visibility:hidden if looping a table 以节省空间 当新数据进来时，在第 4 个孩子之后。发生什么了？你能用传入的数据更新第一个子数据吗？【参考方案5】：你可以使用slice函数：
$('table tbody > tr').slice(1,5).hide();
【讨论】：
【参考方案6】：试试这个：
table > tbody > tr:nth-child(n+15)
display:none;
【讨论】：
以上是关于设置 HTML 表格的最大显示行数的主要内容，如果未能解决你的问题，请参考以下文章