Définir le nombre maximum de lignes affichées pour la table HTML
avoir une page JSP avec une table HTML générée dynamiquement avec un nombre inconnu de lignes.
avoir la propriété sur le backend, qui fixe le nombre maximum de lignes, E. g: max_rows=15.
comment limiter le nombre de lignes de la table HTML à max_rows valeur? L'autre partie de la table doit être accessible par défilement vertical,cela signifie que l'utilisateur voit 15 lignes et si faire défiler vers le bas, qu'il sera vu d'autres lignes de la table.
cela peut être fait empiriquement en calculant la hauteur moyenne de la rangée et en utilisant la propriété max-height pour div-wrapper, mais je pense que cette approche n'est pas très stable.
il faut donc compter sur le nombre de rangs. Peut-être qu'il y a un plugin pour un tel cas ou c'est la solution standard CSS ou HTML?
5 réponses
cela peut être fait avec HTML standard, CSS et un peu de javascript. Il peut être fait pour dégrader gracieusement pour les clients avec javascript désactivé. Je veux dire, ils verront juste la table originale, non modifiée par des rouleaux. Essayez quelque chose comme ceci:
<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>
cela a été testé dans Firefox, Chrome et IE 7, mais il devrait fonctionner tous les navigateurs modernes. Notez que peu importe la taille du contenu de chaque rangée, ou la quantité de rembourrage de chaque cellule. Si vous ne souhaitez pas l'utiliser border-collapse: collapse sur votre table, puis vous devrez ajouter du code dans la boucle for pour tenir compte de cellspacing.
si vous avez des bordures plus épaisses, remplacez la fonction javascript par celle-ci:
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";
}
}
Le try / catch là gère les différences entre IE et les autres navigateurs. Le code dans la capture est pour IE.
Modifier: cela ne résout pas réellement le problème proposé. J'ai raté la partie de la question à laquelle l'utilisateur doit être capable de faire défiler pour voir le reste des lignes. Whoop. donc, je suppose que js est vraiment nécessaire.
Cela peut être fait sans javascript. Le truc est d'utiliser nth-child(x):
table {
border-collapse: collapse;
}
tr:nth-child(n + 4) {
visibility: hidden;
}
l'effondrement de la frontière est nécessaire pour que la frontière ne s'étende pas au-delà des rangées cachées.
Voici le tripoter.
mettez votre table dans un bloc div et utilisez CSS pour spécifier la propriété height and overflow du div.
<style type="text/css">
.table_outer { height: 15em; overflow: auto; }
</style>
<div class="table_outer">
<table>
...table content...
</table>
</div>
de cette façon le div a une hauteur fixe et le navigateur ajoutera une barre de défilement lorsque le contenu du bloc div est trop haut.
j'ai réglé la hauteur de 15em, ce qui correspond à 15 * police-hauteur. Lorsque vous utilisez des bordures, des rembourrages et des trucs, cette hauteur est incorrecte. Mais il peut être calculé plus correctement (en px) pour votre conception.
il n'y a aucun moyen de faire cela avec seulement CSS et HTML, vous avez besoin de javascript aussi. Obtenir la hauteur des 15 premières rangées, et limiter la hauteur d'un div d'emballage à cette hauteur. Définir overflow: auto sur le div pour obtenir vos barres de défilement.
n'oubliez pas de définir une hauteur par défaut sur le div comme un repli si javascript est désactivé.
Vous pouvez utiliser le slice fonction:
$('table tbody > tr').slice(1,5).hide();