implémentation CSS des colonnes de la table d'opération-tutoriel CSS-php.cn

implémentation CSS des colonnes de la table d'opération

php中世界最好的语言

Libérer： 2018-03-21 13:11:16

original

1806 Les gens l'ont consulté

Cette fois je vais vous apporter les précautions pour implémenter le fonctionnement des colonnes de table en CSS Voici des cas pratiques, regardons-les ensemble.

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 loopAjout de la méthode d'épissage des chaînes ; ce qui entraîne beaucoup de code js ; 🎜>rendu de modèle;La charge de travail a été soudainement beaucoup réduite et je me suis senti à l'aise;

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

En raison du grand nombre de colonnes dans certains tableaux ; le texte était entièrement compressé et enroulé vers le bas ; la scène était terrible, j'ai donc adopté la méthode consistant à ne pas forcer le retour à la ligne

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

Copier après la connexion

Le nouveau problème est qu'après un retour à la ligne forcé, toute la largeur dépasse le corps

J'ai donc envisagé de corriger les colonnes importantes du tableau ; utilisez la barre de défilement horizontale pour faire glisser au milieu ; 🎜>

Considérant que les colonnes doivent être fixes, la table doit être divisée ; puis utiliser Float pour restaurer la table ; l'exemple suivant consiste à diviser une table en trois puis à la restaurer

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

Copier après la connexion

Considérant qu'il doit être adaptatif, il utilise des pourcentages pour le faire ;
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

Lecture recommandée :

Explication détaillée de l'utilisation des événements de pointeur en CSS3

focus-within Mode d'emploi détaillé

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!