html中表体下拉标头不懂动6,html实例之给table的tbody设置垂直滚动条但thead固定不动...

html代码：

NameColorDescription

AppleRedThese are red.PearGreenThese are green.GrapePurple / GreenThese are purple and green.OrangeOrangeThese are orange.BananaYellowThese are yellow.KiwiGreenThese are green.

css代码：

table {

width: 100%;

text-align: left;

min-width: 610px;

}

tr {

height: 30px;

padding-top: 10px

}

tbody {

height: 150px;

overflow-y: auto;

overflow-x: hidden;

}

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

td,th { float: left; }

td:nth-child(1),

th:nth-child(1) {

width: 20%;

}

td:nth-child(2),

th:nth-child(2) {

width: 20%;

float: left;

}

td:nth-child(3),

th:nth-child(3) {

width: 59%;

float: left;

}

/* some colors */

thead {

background-color: #333333;

color: #fdfdfd;

}

table tbody tr:nth-child(even) {

background-color: #dddddd;

}

运行结果：在线运行