Maximale des lignes affichées comte de tableau HTML

Ont JSP page avec HTML générées dynamiquement le tableau avec un nombre inconnu de lignes.

Avoir la propriété sur le backend, qui définit le nombre maximal de lignes, e.g: max_rows=15.

Comment limiter le nombre de lignes de la table HTML pour max_rows valeur?
L'autre partie du tableau doivent être accessibles par défilement verticale,cela signifie que l'utilisateur de voir les 15 lignes et si pour faire défiler vers le bas, qui sera vu d'autres lignes de la table.

Il peut être fait de façon empirique par le calcul de la moyenne de la hauteur de la ligne et à l'aide de max-hauteur de propriété pour les div-wrapper, mais je pense que cette approche n'est pas très stable.

Il est donc nécessaire de s'appuyer sur le nombre de lignes.
Peut-être il ya un plugin pour ce cas ou c'est la norme CSS ou HTML solution?

Quelques informations supplémentaires serait-il utile, est-ce une page générée dynamiquement, si oui quel cadre, quelle source de données? Aussi, vous voulez dire sans limite de défilement, ce qui devrait se produire lorsque vous avez plus de lignes que cela?
merci pour la notation, j'ai édité le post pour être plus clair

OriginalL'auteur sergionni | 2010-01-22

  1. 10

    Cela peut être fait avec la norme HTML, CSS et un peu de javascript. Il peut être fait pour dégrader gracieusement pour les clients avec javascript désactivé. Je veux dire par là, ils vont juste voir la table d'origine, non modifié par les barres de défilement. 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 qu'il n'a pas d'importance comment grand le contenu de chaque ligne est, ou combien de remplissage de chaque cellule. Si vous ne souhaitez pas utiliser border-collapse:collapse sur votre table, vous devez ajouter du code dans la boucle for pour prendre cellspacing en compte.

    Si vous avez plus épais frontières, puis remplacer la fonction javascript avec celui-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 dans il gère les différences entre IE et les autres navigateurs. Le code dans le catch est pour IE.

    l'air prometteur, je vais écrire des commentaires dès tester cette solution pour mon cas
    fonctionne bien,merci pour l'aide
    C'est un peu tard, mais s'il vous plaît vérifier ma réponse. J'ai trouvé un moyen de le faire sans javascript!
    Votre solution ne fournit pas le scrolling qui était initialement demandé...il vient se cache les lignes supplémentaires, ce qui les rend inaccessibles.
    Vous avez absolument raison. Je n'ai pas compris la question. Désolé pour ressusciter une vieille question avec une réponse incorrecte. Je vous remercie pour cette. J'ai édité ma réponse avec un avertissement.

    OriginalL'auteur DaveS

  2. 2

    Modifier: Ce n'est pas réellement résoudre 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. Oups. Donc, je suppose que le js est réellement nécessaire.

    Cela peut être fait sans javascript. L'astuce est d'utiliser nth-child(x):

    table {
border-collapse: collapse;
}
tr:nth-child(n + 4) {
visibility: hidden;
}

    Le border-collapse est nécessaire de sorte que la frontière ne s'étend pas au-delà les lignes masquées.

    Voici la violon.

    c'est une façon intéressante
    vous pouvez également utiliser display:none au lieu de visibility:hidden si la boucle d'une table pour économiser de l'espace
    Lorsque de nouvelles données, après le 4ème enfant. Ce qui se passe? Pouvez-vous mettre à jour le 1er enfant de données avec les données entrantes?

    OriginalL'auteur rarrarrarrr

  3. 1

    Mis à votre table dans un bloc div et CSS pour spécifier la hauteur et la propriété de dépassement de la 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, la div a une hauteur fixe et le navigateur va ajouter une barre de défilement lorsque le contenu de la div bloc est trop en hauteur.

    J'ai réglé la hauteur de 15em, ce qui correspond à 15 * police-hauteur. Lors de l'utilisation des frontières, des remplissages et des trucs cette hauteur est incorrect. Mais il peut être calculé de manière plus adéquate (en px) pour votre conception.

    Oh je n'ai pas vu vous déjà pensé à cela. Bien que je pense qu'il est stable et soutenu par la plupart/tous les navigateurs.
    Oui, il est stable, mais j'ai peur que la hauteur de la colonne peut varier à cause de la longueur du texte à l'intérieur, et il peut causer une certaine imprécision.
    En effet. Vous pouvez utiliser JavaScript pour trouver la hauteur de la première 15 lignes, ajouter ces valeurs, modifier div hauteur. Mais cela semble très instable pour moi...

    OriginalL'auteur Veger

  4. 1

    Il n'y a aucun moyen de le faire avec seulement le CSS et le HTML, vous avez besoin de javascript. Obtenir la hauteur de la partie supérieure de 15 lignes, et de limiter la hauteur d'un emballage div à la hauteur. Ensemble overflow: auto sur la div pour obtenir vos barres de défilement.

    N'oubliez pas de définir une valeur par défaut de la hauteur de la div comme un secours si javascript est désactivé.

    OriginalL'auteur Emil Stenström

  5. 0

    Vous pouvez utiliser le slice fonction:

    $('table tbody > tr').slice(1,5).hide();

    OriginalL'auteur user8761489