avoir une page JSP avec une table HTML générée dynamiquement avec un nombre inconnu de lignes.
avoir une propriété sur le backend, qui définit un nombre maximum de lignes, E.g: max_rows = 15 .
Comment limiter le nombre de lignes pour la table HTML à Il peut être fait de manière empirique en calculant la hauteur moyenne de la rangée et à l'aide d'une propriété max-hauteur pour Div-Wrapper, mais je pense que cette approche n'est pas très stable.
Donc, il est nécessaire de compter sur le nombre de lignes.
Il y a peut-être un plugin pour un tel cas ou sa solution standard CSS ou HTML?
6 Réponses :
Mettez votre table dans un bloc div et utilisez CSS pour spécifier la propriété Hauteur et débordement de la DIV.
<style type="text/css">
.table_outer { height: 15em; overflow: auto; }
</style>
<div class="table_outer">
<table>
...table content...
</table>
</div>
Oh je n'ai pas vu que tu as déjà pensé à cela. Bien que je faire pense qu'il est stable et soutenu par la plupart / tous les navigateurs.
Oui, c'est stable, mais j'ai bien peur que la hauteur de la colonne puisse varier en raison d'un texte long à l'intérieur, et cela peut causer une certaine inexactitude.
En effet. Vous pouvez utiliser JavaScript pour trouver la hauteur des 15 premières lignes, ajoutez ces valeurs, modifiez la hauteur de div. Mais cela sonne très instable pour moi ...
Il n'y a aucun moyen de le faire avec uniquement CSS et HTML, vous avez également besoin de JavaScript. Obtenez la hauteur des 15 premières lignes et limitez la hauteur d'une intervalle d'enveloppe à cette hauteur. Set Overflow: Auto sur la DIV pour obtenir vos barres de défilement.
N'oubliez pas de définir une hauteur par défaut sur la DIV comme retombe si JavaScript est éteint.
Ceci peut être fait avec Standard HTML, CSS et un peu de JavaScript. Il peut être fait pour dégrader gracieusement les clients avec JavaScript éteint aussi. Par cela, je veux dire, ils verront simplement la table d'origine, non modifiée par des barres de défilement. Essayez quelque chose comme ceci:
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";
}
}
semble prometteur, j'écrirai des commentaires dès bientôt tester cette solution pour mon cas
C'est un peu plus tard, mais s'il vous plaît vérifier ma réponse. J'ai trouvé un moyen de le faire sans JavaScript!
@RarrarRarrr votre solution ne fournit pas le défilement qui a été initialement demandé ... Cela cache simplement les lignes supplémentaires, ce qui les rend inaccessibles.
@Daves vous êtes absolument correct. J'ai raté cela dans la question. Désolé de ressusciter une vieille question avec une réponse incorrecte. Merci d'avoir fait remarquer cela. J'ai édité ma réponse avec un avertissement de discussion.
Ceci peut effectivement être fait sans JavaScript. L'astuce utilise L'effondrement frontalier est nécessaire pour que la frontière ne s'étend pas au-delà des rangées cachées . Voici le violon .
nth-enfant (x) :
Vous pouvez également utiliser l'affichage: Aucun au lieu de la visibilité: caché si vous bouclez une table pour économiser de l'espace
Lorsque de nouvelles données sont entrées, après le 4ème enfant. Ce qui se produit? Pouvez-vous mettre à jour les données de 1er enfants avec les données entrantes?
Essayez ceci:
table > tbody > tr:nth-child(n+15) {
display:none;
}
Certaines informations supplémentaires seraient-elles utiles, constitue-la une page générée dynamiquement, si oui, quel cadre, quelle distance de données? Vous voulez également dire la limite sans défilement, que devriez-vous arriver lorsque vous avez plus de lignes que cela?
Merci de notation, j'ai été modifié pour être plus clair