Tableau HTML avec 100% de largeur, avec défilement vertical à l'intérieur tbody
Comment puis-je définir pour <table> 100% de la largeur et de mettre seulement à l'intérieur de <tbody> de défilement verticale pour une certaine hauteur?
CSS:
table {
width: 100%;
display:block;
}
thead {
display: inline-block;
width: 100%;
height: 20px;
}
tbody {
height: 200px;
display: inline-block;
width: 100%;
overflow: auto;
}
HTML:
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>Je veux éviter d'ajouter quelques autres div, tout ce que je veux, c'est simple table comme ça, et quand j'ai essayer de changer l'affichage, table-layout, position et beaucoup plus de choses dans le CSS de la table ne fonctionne pas bien avec 100% de largeur seulement avec une largeur fixe en pixels.
- je ne suis pas vraiment sûr de ce que vous voulez atteindre. regardez ceci: jsfiddle.net/CrSpu et de dire comment vous voulez qu'il se comporte
- je sais, mais regardez.. th et td ne sont pas montré toute la largeur.. postimg.org/image/mgd630y61
- Connexes: stackoverflow.com/questions/1019938/...
- Connexes: stackoverflow.com/q/4534200/435605 et stackoverflow.com/q/33075195/435605
Vous devez vous connecter pour publier un commentaire.
Afin de rendre
<tbody>élément de défilement, nous avons besoin de changer la façon dont il est affiché sur la page c'est à dire à l'aide dedisplay: block;pour l'afficher comme un élément de niveau bloc.Puisque nous changeons la
displaypropriété detbody, nous devons changer cette propriété pourtheadélément comme pour l'empêcher de briser la disposition de table.Nous avons donc:
Navigateurs Web d'affichage de l'
theadettbodyéléments ligne-groupe (table-header-groupettable-row-group) par défaut.Une fois que nous modifions que, à l'intérieur
tréléments de ne pas remplir tout l'espace de leur conteneur.Afin de corriger cela, nous devons calculer la largeur de
tbodycolonnes et d'appliquer la valeur correspondante à latheadcolonnes via JavaScript.Automatique De La Largeur Des Colonnes
Ici est la version jQuery de logique ci-dessus:
Et voici la sortie (sur Windows 7, Chrome 32):
TRAVAIL DE DÉMONSTRATION.
Toute La Largeur De La Table, Largeur Relative Des Colonnes
Que l'Affiche Originale de besoin, nous pourrions étendre le
tableà 100% dewidthde son conteneur, et ensuite à l'aide d'un parent (Pourcentage)widthpour chacune des colonnes du tableau.Depuis la table a une (sorte de) design fluide, nous devons ajuster la largeur de
theadcolonnes lorsque le conteneur est redimensionnée.D'où l'on doit régler les colonnes de largeurs une fois que la fenêtre est redimensionnée:
La sortie serait:
TRAVAIL DE DÉMONSTRATION.
Prise en charge du navigateur et des solutions de rechange
J'ai testé les deux méthodes ci-dessus sur Windows 7 via les nouvelles versions des principaux Navigateurs Web (y compris IE10+) et cela a fonctionné.
Cependant, il ne pas travail correctement sur IE9 et ci-dessous.
C'est parce que dans un tableau de mise en page, tous les éléments doivent suivre les mêmes propriétés structurelles.
En utilisant
display: block;pour la<thead>et<tbody>éléments, que nous avons brisé la structure de la table.Refonte de mise en page via JavaScript
Une approche à la refonte de la (toute) la disposition de table. L'utilisation de JavaScript pour créer une nouvelle mise en page à la volée et de la poignée et/ou ajuster les largeurs/hauteurs des cellules de façon dynamique.
Par exemple, regardez les exemples suivants:
Tables gigognes
Cette approche utilise deux tables imbriquées avec un div contenant. La première
tablea qu'une seule cellule qui a undiv, et le second tableau est placé à l'intérieur quedivélément.Vérifier la Le défilement Vertical des tables à CSS Jouer.
Cela fonctionne sur la plupart des navigateurs web. Nous pouvons également faire de la logique ci-dessus de manière dynamique via JavaScript.
Tableau avec en-tête fixe à défilement
Puisque le but de l'ajout de la barre de défilement verticale de la
<tbody>est l'affichage de la table en-tête en haut de chaque ligne, on pourrait position latheadélément de resterfixeden haut de l'écran à la place.Ici est un Travail De Démonstration de cette approche réalisée par Julien.
Il est promis à un navigateur web de soutien.
Et ici un pur CSS mise en œuvre par Willem Van Bockstal.
La Pure CSS Solution
Ici, c'est le vieux la réponse. Bien sûr, j'ai ajouté une nouvelle méthode et raffinée, les déclarations CSS.
Tableau à Largeur Fixe
Dans ce cas, le
tabledevrait avoir un fixewidth(y compris la somme des colonnes de largeurs et de la largeur de la verticale de la barre de défilement).Chaque colonne devrait avoir une largeur et la dernière colonne de
theadélément a besoin d'une plus grande largeur qui est égal à celui des autres largeur + le largeur de défilement verticale-bar.Par conséquent, le CSS serait:
Voici le résultat:
TRAVAIL DE DÉMONSTRATION.
Table avec 100% de Largeur
Dans cette approche, le
tablea une largeur de100%et pour chaquethettd, la valeur dewidthpropriété doit être inférieure à100% /number of cols.Aussi, nous devons réduire le largeur de
theadcomme valeur de la largeur de défilement verticale-bar.Pour ce faire, nous avons besoin d'utiliser CSS3
calc()fonction, comme suit:Ici est la Démo En Ligne.
Remarque: Cette approche échouer si le contenu de chaque colonne des sauts de ligne, c'est à dire le contenu de chaque cellule doit être assez court.
Dans la suite, il y a deux exemple simple de pur CSS solution que j'ai créé à l'époque j'ai répondu à cette question.
Ici est la jsFiddle Démo v2.
Ancienne version: jsFiddle Démo v1
display: blockvous perdez de la table de propriétés que la largeur de colonne partagé entre thead et tbody. Je sais que vous avez résolu ce problème en définissantwidth: 19.2%mais dans le cas où nous ne savons pas la largeur de chaque colonne à l'avance, cela ne fonctionne pas.height: 100%(lorsque vous souhaitez que le tableau s'étendre vers le bas de la page).ng-repeattables. Je ne sais pas pourquoi il y a tous ces bibliothèques fixes avec des en-têtes de tableau et ce n'est pas quand il y a cette solution.box-sizingde la propriété, de sorte que le fait d'avoir des frontières de deux différentes épaisseurs de ne pas les jeter hors de l'alignement de la colonne.colWidth = $bodyCells.toArray().map(function() { return $(this).width(); });parce que jquery.carte renvoyer un objet jquery et pas un nombre de tableauflexsolution est plus approprié (au moins, il a mieux fonctionné et a été beaucoup plus facile à régler que la "Table avec 100% de la Largeur" solution de cette réponse).Dans la solution suivante, table occupe 100% du conteneur parent, pas d'absolu tailles nécessaires. C'est de la pure CSS, flex mise en page est utilisé.
Voici à quoi il ressemble:
Possible les inconvénients:
HTML (raccourcie):
CSS, avec quelques décorations omis pour plus de clarté:
code complet sur jsfiddle
Même code en MOINS de sorte que vous pouvez mélanger dans:
tddevrait aidertbody's lorsque vous avez des données groupées?.table-container { display: flex; flex-direction: column; justify-content: flex-start; }Dans les navigateurs modernes, vous pouvez tout simplement utiliser les css:
Je suis en utilisant
display:blockpourtheadettbody.En raison de la largeur de la
theadcolonnes est différente de la largeur de latbodycolonnes.Pour corriger cela, j'utilise des petits
jQuerycode mais il peut être fait dansJavaScriptseulement.Voici mon travail de démonstration:
http://jsfiddle.net/gavroche/N7LEF/
Ne fonctionne pas dans IE 8
JS:
CSS:
HTML:
colNumbervariable pourrait être remplacé par un code qui parcourt réelle cellules trouvé à la place, et notez qu'il n'a pas à faire face correctement si, il y a toutcolspans (pourrait aussi être améliorée dans le code, si nécessaire, mais peu probable, sur le genre de table tendance à vouloir cette fonctionnalité de défilement).Créer deux tables, l'une après l'autre, mettre le deuxième tableau dans un div de hauteur fixe et définissez la propriété overflow auto. Aussi garder à tous les de la td à l'intérieur thead dans le deuxième tableau vide.
Je l'ai eu enfin droit à de la pure CSS en suivant ces instructions:
http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/
La première étape consiste à définir les
<tbody>à display: block donc un dépassement de capacité et la hauteur peuvent être appliquées. À partir de là, les lignes de la<thead>doivent être en position: relative et d'affichage: volume, de sorte qu'ils vont s'asseoir sur le dessus de la désormais défilement<tbody>.tbody, thead { display: block; overflow-y: auto; }Parce que le
<thead>est relativement placé de chaque cellule du tableau a besoin d'un explicite largeurMais malheureusement cela ne suffit pas. Lorsqu'un ascenseur est présent navigateurs allouer de l'espace pour elle, donc, la
<tbody>finit par avoir moins d'espace disponible à l'<thead>. Notez le léger désalignement cela crée...La seule solution qui me vient en tête était de mettre un min-width sur toutes les colonnes à l'exception de la dernière.
Ensemble codepen exemple ci-dessous:
CSS:
Html:
EDIT: solution Alternative pour la largeur de la table de 100% (au-dessus est en fait pour une largeur fixe et n'a pas répondu à la question):
HTML:
CSS:
Démo: http://codepen.io/anon/pen/bNJeLO
CSS uniquement
pour Chrome, Firefox, Bord (et d'autres evergreen navigateurs)
Simplement
position: sticky; top: 0;votrethéléments:CSS:
HTML:
PS: si vous avez besoin d' frontières pour TH éléments
th {box-shadow: 1px 1px 0 #000; border-top: 0;}aidera (puisque par défaut les frontières ne sont pas peintes correctement sur parchemin).Pour une variante de la ci-dessus qui utilise seulement un peu de JS pour accueillir pour IE11 voir cette réponse https://stackoverflow.com/a/47923622/383904
Css solution de contournement pour forcer les colonnes à afficher correctement avec un 'bloc' tbody
Cette solution exige toujours le
thlargeurs calculé et fixé par jQueryEt le Jquery /Javascript
essayer ci-dessous approche, très simple et facile à mettre en œuvre
Ci-dessous est le jsfiddle lien
http://jsfiddle.net/v2t2k8ke/2/
HTML:
CSS:
Jquery:
L'ajout d'une largeur fixe à td,th après tbody & thead blocage d'afficheur fonctionne parfaitement et on peut aussi les utiliser slimscroll plugin pour rendre la barre de défilement belle.
HTML:
C'est le code qui fonctionne pour moi de créer un collant thead sur une table avec un défilement tbody:
Pour l'utilisation de "overflow: scroll" vous devez définir "display:block" sur thead et tbody. Et qui bousille les largeurs de colonne entre eux. Mais ensuite, vous pouvez cloner le thead ligne avec le Javascript et le coller dans le tbody comme un caché ligne pour empêcher l'exacte col largeurs.
http://jsfiddle.net/Julesezaar/mup0c5hk/
Le css: