Maison > Article > interface Web > Un exemple de la façon d'implémenter le défilement horizontal entre les colonnes fixes du tableau et les en-têtes du tableau en utilisant du CSS pur

Un exemple de la façon d'implémenter le défilement horizontal entre les colonnes fixes du tableau et les en-têtes du tableau en utilisant du CSS pur

巴扎黑original: 2017-09-14 09:39:032349parcourir

Cet article vous présente principalement les informations pertinentes sur la façon d'utiliser du CSS pur pour obtenir des colonnes et des en-têtes fixes dans un tableau, ainsi qu'un défilement horizontal au milieu. L'article vous présente en détail les idées et les méthodes pour obtenir cet effet à l'aide d'un exemple. code. Il a une certaine valeur de référence et d'apprentissage pour les études ou le travail de chacun. Les amis qui en ont besoin peuvent venir jeter un œil ci-dessous.

Avant-propos

Le système de gestion backend sur lequel je travaille récemment doit traiter un grand nombre de tables, car le projet original utilise un for boucle et chaînes concaténées Il a été implémenté d'une manière qui a entraîné beaucoup de code js ; l'imbrication de divers guillemets simples et doubles était un casse-tête, donc vue.js a été utilisé pour le rendu du modèle ; a été soudainement beaucoup réduit et je me suis senti à l'aise

Le texte a été forcé de passer à la ligne

En raison du grand nombre de colonnes dans dans certains tableaux, le texte était serré et replié vers le bas ; la scène était terrible à voir ; la méthode consistant à ne forcer aucun saut de ligne est donc adoptée

<style>
p{
     white-space: nowrap;//强制不折行
}
</style>

Le nouveau. le problème est qu'après des sauts de ligne forcés, toute la largeur dépasse le corps

Le tableau est donc considéré comme important. Les colonnes sont fixes ; utilisez la barre de défilement horizontale pour faire glisser au milieu ; >

<style>
p{
    white-space: nowrap;
    overflow: hidden;//控制溢出隐藏
    overflow-x: scroll;//设置横向滚动条
}
</style>

Considérant que les colonnes doivent être corrigées, la table Divisez-la ; puis utilisez float pour restaurer la table ; faites-le flotter pour restaurer

Considérant qu'il doit être adaptatif, un pourcentage est utilisé Do;

Le cas ci-dessus est donc terminé

<style>
    p{
        width: 100%;
        white-space: nowrap;
    }
    table td{
        border: 1px solid #000;
    }
    .tab1{
        width: 20%;
        float: left;
    }
    .tab2{
        width: 70%;
        float: left;
        overflow: hidden;
        overflow-x: scroll;
    }
    .tab3{
        width: 10%;
        float: left;
    }
</style>
<body>
<p>
    <table class="tab1">
        <thead>
        <tr>
            <th>首列</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>首列</td>
        </tr>
        </tbody>
    </table>

    <table class="tab2">
        <thead>
        <tr>
            <th>中间列</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>中间列</td>
        </tr>
        </tbody>
    </table>

    <table class="tab3" >
        <thead>
        <tr>
            <th>尾列</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>尾列</td>
        </tr>
        </tbody>
    </table>
</p>
</body>

Un autre point est que l'en-tête de la table du milieu est également nécessaire. Il est corrigé qu'il ne puisse pas glisser avec le front en dessous, l'idée que j'ai adoptée ici est d'utiliser ; positionnement ; puisque tout ce qui précède est fait avec des pourcentages ; alors la valeur gauche du positionnement est également un pourcentage il n'y a pas de code ici

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction détaillée aux entretiens frontaux de même origine et inter-domainesArticle suivant：Introduction détaillée aux entretiens frontaux de même origine et inter-domaines

Articles Liés

Voir plus