html表格中的滚动字幕,如何在html表格上显示滚动条

接受的答案提供了一个很好的起点，但如果您调整框架大小，更改列宽，甚至更改表格数据，标题将以各种方式搞砸。我见过的每个其他例子都有类似的问题，或者对表的布局施加了一些严格的限制。

不过，我想我终于解决了所有这些问题。它占用了大量的CSS，但最终产品与普通表一样可靠且易于使用。

这是一个示例，它具有复制OP引用的表所需的所有功能：jsFiddle

必须更改颜色和边框以使其与参考相同。CSS注释中提供了有关如何进行这些更改的信息。

这是代码：

/*the following html and body rule sets are required only if using a % width or height*/

/*html {

width: 100%;

height: 100%;

}*/

body {

box-sizing: border-box;

width: 100%;

height: 100%;

margin: 0;

padding: 0 20px 0 20px;

text-align: center;

background: white;

}

.scrollingtable {

box-sizing: border-box;

display: inline-block;

vertical-align: middle;

overflow: hidden;

width: auto; /*if you want a fixed width, set it here, else set to auto*/

min-width: 0/*100%*/; /*if you want a % width, set it here, else set to 0*/

height: 188px/*100%*/; /*set table height here; can be fixed value or %*/

min-height: 0/*104px*/; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/

font-family: Verdana, Tahoma, sans-serif;

font-size: 15px;

line-height: 20px;

padding: 20px 0 20px 0; /*need enough padding to make room for caption*/

text-align: left;

}

.scrollingtable * {box-sizing: border-box;}

.scrollingtable > div {

position: relative;

border-top: 1px solid black;

height: 100%;

padding-top: 20px; /*this determines column header height*/

}

.scrollingtable > div:before {

top: 0;

background: cornflowerblue; /*header row background color*/

}

.scrollingtable > div:before,

.scrollingtable > div > div:after {

content: "";

position: absolute;

z-index: -1;

width: 100%;

height: 100%;

left: 0;

}

.scrollingtable > div > div {

min-height: 0/*43px*/; /*if using % height, make this large enough to fit scrollbar arrows*/

max-height: 100%;

overflow: scroll/*auto*/; /*set to auto if using fixed or % width; else scroll*/

overflow-x: hidden;

border: 1px solid black; /*border around table body*/

}

.scrollingtable > div > div:after {background: white;} /*match page background color*/

.scrollingtable > div > div > table {

width: 100%;

border-spacing: 0;

margin-top: -20px; /*inverse of column header height*/

/*margin-right: 17px;*/ /*uncomment if using % width*/

}

.scrollingtable > div > div > table > caption {

position: absolute;

top: -20px; /*inverse of caption height*/

margin-top: -1px; /*inverse of border-width*/

width: 100%;

font-weight: bold;

text-align: center;

}

.scrollingtable > div > div > table > * > tr > * {padding: 0;}

.scrollingtable > div > div > table > thead {

vertical-align: bottom;

white-space: nowrap;

text-align: center;

}

.scrollingtable > div > div > table > thead > tr > * > div {

display: inline-block;

padding: 0 6px 0 6px; /*header cell padding*/

}

.scrollingtable > div > div > table > thead > tr > :first-child:before {

content: "";

position: absolute;

top: 0;

left: 0;

height: 20px; /*match column header height*/

border-left: 1px solid black; /*leftmost header border*/

}

.scrollingtable > div > div > table > thead > tr > * > div[label]:before,

.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,

.scrollingtable > div > div > table > thead > tr > * + :before {

position: absolute;

top: 0;

white-space: pre-wrap;

color: white; /*header row font color*/

}

.scrollingtable > div > div > table > thead > tr > * > div[label]:before,

.scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);}

.scrollingtable > div > div > table > thead > tr > * + :before {

content: "";

display: block;

min-height: 20px; /*match column header height*/

padding-top: 1px;

border-left: 1px solid black; /*borders between header cells*/

}

.scrollingtable .scrollbarhead {float: right;}

.scrollingtable .scrollbarhead:before {

position: absolute;

width: 100px;

top: -1px; /*inverse border-width*/

background: white; /*match page background color*/

}

.scrollingtable > div > div > table > tbody > tr:after {

content: "";

display: table-cell;

position: relative;

padding: 0;

border-top: 1px solid black;

top: -1px; /*inverse of border width*/

}

.scrollingtable > div > div > table > tbody {vertical-align: top;}

.scrollingtable > div > div > table > tbody > tr {background: white;}

.scrollingtable > div > div > table > tbody > tr > * {

border-bottom: 1px solid black;

padding: 0 6px 0 6px;

height: 20px; /*match column header height*/

}

.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;}

.scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: gainsboro;} /*alternate row color*/

.scrollingtable > div > div > table > tbody > tr > * + * {border-left: 1px solid black;} /*borders between body cells*/

Column 4

Column 4

Lorem ipsumDolorSitAmet consecteturLorem ipsumDolorSitAmet consecteturLorem ipsumDolorSitAmet consecteturLorem ipsumDolorSitAmet consecteturLorem ipsumDolorSitAmet consecteturLorem ipsumDolorSitAmet consecteturLorem ipsumDolorSitAmet consecteturLorem ipsumDolorSitAmet consecteturLorem ipsumDolorSitAmet consecteturLorem ipsumDolorSitAmet consecteturLorem ipsumDolorSitAmet consecteturLorem ipsumDolorSitAmet consectetur

Faux bottom caption