Maison >interface Web >tutoriel CSS >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:032408parcourir
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!