html Tabelle mit vertikalen Scroll innerhalb tbody

Question

Ich versuche für eine vertikale Bildlaufleiste in tbody mit einem festen Header. Ich habe versucht, die Lösung in der Verbindung zur Verfügung gestellt.

HTML table with 100% width, with vertical scroll inside tbody

table { 
width: 100%; 
border-spacing: 0; 
} 

thead, tbody, tr, th, td { display: block; } 

thead tr { 
/* fallback */ 
width: 97%; 
/* minus scroll bar width */ 
width: -webkit-calc(100% - 16px); 
width: -moz-calc(100% - 16px); 
width:   calc(100% - 16px); 
} 

tr:after { /* clearing float */ 
content: ' '; 
display: block; 
visibility: hidden; 
clear: both; 
} 

tbody { 
height: 100px; 
overflow-y: auto; 
overflow-x: hidden; 
} 

tbody td, thead th { 
width: 19%; /* 19% is less than (100%/5 cols) = 20% */ 
float: left; 
} 

Es funktioniert gut, wenn Bildlaufleiste appears.But wenn die Zeilen wenige und die Bildlaufleiste sind nicht angezeigt wird, dann ist thead nicht mit tbody ausgerichtet sind. Wie kann ich das Problem mit CSS beheben?

Answer 1

Das ist, weil die über CSS die Breite der thead tr reduziert ‚s Breite 97% oder (100% - die Breite der Scrollbar) für die reduzierte Breite des tbody zu empfangen wegen der Bildlaufleiste nur in tbody. Wenn es keine Bildlaufleiste in tbody gibt, bleibt der tBody vollständig 100% breit, aber die thead wird immer noch verengt.

Sie möchten mit dem CSS beheben, das CSS kann nicht die Tatsache erkennen, dass nicht genug Zeilen für die Bildlaufleiste angezeigt werden. Sie können es mit JavaScript obwohl beheben - nur in der Antwort, die Sie zitiert haben, gibt es Beispiele für die Verwendung JavaScript, um die Breite der tbody Spalten auf thead nur am Anfang der Antwort anwenden.

EDIT

Oder zwingt vertikale Bildlaufleiste zu allen Zeiten, so dass die Breite des tbody nicht unabhängig von der Zeilenanzahl ändert:

tbody { 
    # ... other attributes 
    overflow-y: scroll; 
} 

entnommen aus: Force Vertical Scrollbar

Answer 2

Sobald Ihre tBody-Daten aus der zugewiesenen Höhe ausgefahren sind, wird Ihre y-Achse aktiviert.

tbody { 
     height: 50px; 
     display: inline-block; 
     width: 100%; 
     overflow-y:scroll; 
    } 

Answer 3

Verwenden tbodymax-height:100px statt height:100px

tbody { 
    max-height: 100px; 
    overflow-y: auto; 
    overflow-x: hidden; 
}