table表格表头固定,内容滚动的实现方式
直接上代码
想要的效果
表头固定,表体内容滚动
结构部分
<table>
<thead>
<th>序号</th>
<th>项目名称</th>
<th>项目编号</th>
<th>项目类型</th>
<th>项目经理</th>
<th>联系电话</th>
<th>启动时间</th>
<th>验收时间</th>
<th>投资金额</th>
<th>执行金额</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>项目名称1</td>
<td>项目编号1</td>
<td>项目类型1</td>
<td>项目经理1</td>
<td>联系电话1</td>
<td>启动时间1</td>
<td>验收时间1</td>
<td>投资金额1</td>
<td>执行金额1</td>
</tr>
<tr>
<td>2</td>
<td>项目名称2</td>
<td>项目编号2</td>
<td>项目类型2</td>
<td>项目经理2</td>
<td>联系电话2</td>
<td>启动时间2</td>
<td>验收时间2</td>
<td>投资金额2</td>
<td>执行金额2</td>
</tr>
<tr>
<td>3</td>
<td>项目名称3</td>
<td>项目编号3</td>
<td>项目类型3</td>
<td>项目经理3</td>
<td>联系电话3</td>
<td>启动时间3</td>
<td>验收时间3</td>
<td>投资金额3</td>
<td>执行金额3</td>
</tr>
<tr>
<td>4</td>
<td>项目名称4</td>
<td>项目编号4</td>
<td>项目类型4</td>
<td>项目经理4</td>
<td>联系电话4</td>
<td>启动时间4</td>
<td>验收时间4</td>
<td>投资金额4</td>
<td>执行金额4</td>
</tr>
<tr>
<td>5</td>
<td>项目名称5</td>
<td>项目编号5</td>
<td>项目类型5</td>
<td>项目经理5</td>
<td>联系电话5</td>
<td>启动时间5</td>
<td>验收时间5</td>
<td>投资金额5</td>
<td>执行金额5</td>
</tr>
<tr>
<td>6</td>
<td>项目名称6td>
<td>项目编号6</td>
<td>项目类型6</td>
<td>项目经理6</td>
<td>联系电话6</td>
<td>启动时间6</td>
<td>验收时间6</td>
<td>投资金额6</td>
<td>执行金额6</td>
</tr>
</tbody>
</table>
样式部分
table {
margin: 0 auto;
margin-top: 50px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table thead{
display:block;
overflow-y: scroll;
}
table th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table tbody{
display:block;
max-height:100px;
overflow-y: scroll;
}
table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
table th,table td{
width: 125px;
}
注意:此方法比较适合表格宽度固定的写法,如果是不固定的,建议使用百分比来写列宽,同时再写一个和表头一样的结构,定位到表格的表头位置,出现滚动条的话处理一下克隆表头的宽,滚动条一般是17像素。