Maison > Article > interface Web > implémentation CSS des colonnes de la table d'opération
implémentation CSS des colonnes de la table d'opération
- php中世界最好的语言original
- 2018-03-21 13:11:161706parcourir
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>Le nouveau problème est qu'après un retour à la ligne forcé, toute la largeur dépasse le corpsJ'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> - Considérant qu'il doit être adaptatif, il utilise des pourcentages pour le faire ;
Le cas ci-dessus est donc terminé
Je crois vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
<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>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!