web-dev-qa-db-fra.com

Définir le nombre maximal de lignes affichées pour le tableau HTML

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 système, qui définit le nombre maximal de lignes, par exemple: max_rows = 15 .

Comment limiter le nombre de lignes de la table HTML à max_rows value? Une autre partie de la table doit être accessible par défilement vertical, cela signifie que l'utilisateur voit 15 lignes et si vous faites défiler vers le bas, ce sera vu d'autres rangées de table.

Cela peut être fait de manière empirique en calculant la hauteur moyenne de la ligne 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 lignes. Peut-être existe-t-il un plugin pour ce type de cas ou une solution CSS ou HTML standard?

htmlhtml-tablemaxrow
10
sergionni

Cela peut être fait avec HTML standard, CSS et un peu de javascript. Il peut également être conçu pour se dégrader avec élégance pour les clients dont JavaScript est également désactivé. Par cela, je veux dire, ils ne verront que la table originale, non modifiée par des barres de défilement. Essayez quelque chose comme ça:

<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 cela devrait fonctionner avec tous les navigateurs modernes. Notez que la taille du contenu de chaque ligne et l'importance du remplissage de chaque cellule sont sans importance. Si vous ne souhaitez pas utiliser border-collapse: collapse sur votre tableau, vous devrez ajouter du code dans la boucle for pour prendre en compte le espacement des cellules.

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 in gère ici les différences entre IE et les autres navigateurs. Le code dans la capture est pour IE.

10
DaveS

Edit : Cela ne résout pas le problème proposé. J'ai raté la partie de la question que l'utilisateur doit pouvoir faire défiler pour afficher le reste des lignes. Oups. Donc, je suppose que js est réellement nécessaire.

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

table {
    border-collapse: collapse;
}

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

La réduction de la bordure est nécessaire pour que la bordure ne s'étende pas au-delà des lignes masquées.

Voici le violon .

2
rarrarrarrr

Placez votre table dans un bloc div et utilisez CSS pour spécifier la propriété height et 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 sera trop haut.

J'ai réglé la hauteur sur 15em, ce qui correspond à 15 * font-height. Lorsque vous utilisez des bordures, des rembourrages et des rembourrages, cette hauteur est incorrecte. Mais il peut être calculé plus correctement (en px) pour votre conception.

1
Veger

Il n'y a aucun moyen de faire cela avec seulement CSS et HTML, vous avez également besoin de javascript. Obtenez la hauteur des 15 premières lignes et limitez la hauteur d'un div d'emballage à 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 solution de repli si javascript est désactivé. 

1
Emil Stenström

Vous pouvez utiliser la fonction slice :

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