Comment définir la hauteur du corps avec défilement par débordement

Si vous voulez que tbody montre un rouleau, transformez-le en block .

Pour garder le comportement de la table , tournez-vous dans le table .

pour pulvériser uniformément les cellules, utilisez la table-layout:fixed;

DEMO

CSS pour votre test HTML:

 table ,tr td{ border:1px solid red } tbody { display:block; height:50px; overflow:auto; } thead, tbody tr { display:table; width:100%; table-layout:fixed;/* even columns width , fix width of table too*/ } thead { width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */ } table { width:400px; } 

Si tbody ne montre pas de défilement, car le contenu est inférieur à height ou max-height , définissez le défilement à tout moment avec: overflow-y:scroll; . DEMO 2

C’est un moyen simple d’utiliser la barre de défilement sur le corps de la table

 /* It is simple way to use scroll bar to table body*/ .tableBodyScroll tbody { display: block; max-height: 300px; overflow-y: scroll; } .tableBodyScroll thead, tbody tr { display: table; width: 100%; table-layout: fixed; } 

 
 
 
Invoice Number
 
Purchaser
 
Invoice Amount
 
Invoice Date
 
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
 
INV-1233
 
Dinesh Vaitage
 
$300
 
01/12/2017
 
 
  

Par défaut, le overflow ne s’applique pas aux éléments du groupe de tables à moins que vous ne donniez un display:block à

vous devez également donner une position:relative et display: block to

. Vérifiez le DEMO .

 .fixed { width:350px; table-layout: fixed; border-collapse: collapse; } .fixed th { text-decoration: underline; } .fixed th, .fixed td { padding: 5px; text-align: left; min-width: 200px; } .fixed thead { background-color: red; color: #fdfdfd; } .fixed thead tr { display: block; position: relative; } .fixed tbody { display: block; overflow: auto; width: 100%; height: 100px; overflow-y: scroll; overflow-x: hidden; } 

Changez le code de votre deuxième table comme ci-dessous.

 
 
 
 
Name
 
phone
 
 
 
 
 
AAAA
 
323232
 
 
 
BBBBB
 
323232
 
 
 
CCCCC
 
3435656
 
 
  

JSFIDDLE DEMO

Je suppose que ce que vous essayez de faire, c’est de garder l’en-tête fixe et de faire défiler le contenu du corps. Vous pouvez faire défiler le contenu dans 2 directions:

• horizontalement: vous ne pourrez pas faire défiler le contenu horizontalement à moins d’utiliser un curseur (un curseur jQuery par exemple). Je recommanderais d’éviter d’utiliser une table dans ce cas.
• verticalement: vous ne pourrez pas y parvenir avec une balise tbody , car l’affectation de l’ display:block ou display:inline-block brisera la disposition de la table.

Voici une solution utilisant les divs : JSFiddle

HTML:

 
 
 Name 
 
 Phone 
 
 
 
 
 
 
 AAAAAA 
 
 323232 
 
 
 
 
 BBBBBB 
 
 323232 
 
 
 
 
 CCCCCC 
 
 3435656 
 
 
 
  

CSS:

 .wrap_header{width:204px;} .sliding_wrapper, .wrap_body {width:221px;} .sliding_wrapper {overflow-y:scroll; overflow-x:none;} .sliding_wrapper, .wrap_body {height:45px;} .wrap_header, .wrap_body {overflow:hidden;} .column {width:100px; float:left; border:1px solid red;} .cell {width:100px; float:left; border:1px solid red;} /** * @info Clearfix: clear all the floated elements */ .clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .clearfix {display:inline-table;} /** * @hack Display the Clearfix as a block element * @hackfor Every browser except IE for Macintosh */ /* Hides from IE-mac \*/ * html .clearfix {height:1%;} .clearfix {display:block;} /* End hide from IE-mac */ 

Explication:

Vous avez un sliding wrapper qui contiendra toutes les données.

Notez les points suivants:

 .wrap_header{width:204px;} .sliding_wrapper, .wrap_body {width:221px;} 

Il y a une différence de 17px car nous devons prendre en compte la largeur de la barre de défilement.

Webkit semble utiliser en interne l’ display: table-row-group pour le tag tbody . Il y a actuellement un bug avec le réglage de la hauteur: https://github.com/w3c/csswg-drafts/issues/476

Espérons que cela sera bientôt résolu.

Dans mon cas, je voulais avoir une hauteur de tableau réactive plutôt qu’une hauteur fixe en pixels, comme le montrent les autres réponses. Pour ce faire, j’ai utilisé le pourcentage de propriété de hauteur visible et le débordement sur le div contenant la table:

 &__table-container { height: 70vh; overflow: scroll; } 

De cette façon, la table se développera avec la fenêtre en cours de redimensionnement.

HTML:

 
 
 
 
 {{ field[0].key }} 
 
 {{ field[1].key }} 
 
 {{ field[2].key }} 
 
 {{ field[3].key }} 
 
 
 
 
 
 {{ obj.id }} 
 
 {{ obj.name }} 
 
 {{ obj.age }} 
 
 {{ obj.gender }} 
 
 
  

CSS:

 #uniquetable thead{ display:block; width: 100%; } #uniquetable tbody{ display:block; width: 100%; height: 100px; overflow-y:overlay; overflow-x:hidden; } #uniquetable tbody tr,#uniquetable thead tr{ width: 100%; display:table; } #uniquetable tbody tr td, #uniquetable thead tr th{ display:table-cell; width:20% !important; overflow:hidden; } 

cela fonctionnera aussi bien:

 #uniquetable tbody { width:inherit !important; display:block; max-height: 400px; overflow-y:overlay; } #uniquetable thead { width:inherit !important; display:block; } #uniquetable tbody tr, #uniquetable thead tr { display:inline-flex; width:100%; } #uniquetable tbody tr td, #uniquetable thead tr th { display:block; width:20%; border-top:none; text-overflow: ellipsis; overflow: hidden; max-height:400px; }