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-tutoriel CSS-php.cn

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

巴扎黑

Libérer： 2017-09-14 09:39:03

original

2397 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!