ser*_*nni 12 html row html-table max
拥有动态生成的HTML表格的JSP页面,其行数未知.
在后端拥有属性,设置最大行数,例如:max_rows = 15.
如何将HTML表的行数限制为max_rows值？表的其他部分应该可以通过垂直滚动访问,这意味着用户可以看到15行,如果向下滚动,则会看到其他行的表.
它可以通过计算行的平均高度和使用div-wrapper的max-height属性来凭经验完成,但我认为这种方法不是很稳定.
因此需要依赖行数.也许有这种情况的插件或它的标准CSS或HTML解决方案？
Dav*_*veS 10
这可以使用标准的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循环中添加代码以将cellspacing考虑在内.
如果你有更粗的边框,那么用这个替换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.
编辑：这实际上并没有解决提出的问题。我错过了问题中用户需要能够滚动以查看其余行的部分。哎呀。 所以，我想实际上需要js。
这实际上可以在没有 javascript 的情况下完成。诀窍是使用nth-child(x)：
table {
border-collapse: collapse;
}
tr:nth-child(n + 4) {
visibility: hidden;
}
需要边框折叠以便边框不会超出隐藏的行。
这是小提琴。