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 Tabelle mit vertikalen Scroll innerhalb tbody
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?
Können Sie eine jsfiddle in der Post einfügen? –