Project design Report table design of a relatively large number of columns, when the scroll bar below cannot correspond to the column corresponding to the table header, so in the online search for a good period of time, finally found some reference on the Internet, and then summed up a compatible column combination of fixed head demo.
Many browsers have not done much testing, but have been tested in IE9, Firefox, and 360 browsers.
<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "
pageencoding= "UTF-8"%>
<%@ taglib prefix= "C" uri= "Http://java.sun.com/jsp/jstl/core"%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<title> Fixed table header </title>
<style type= "Text/css" >
. div1all{
Position:absolute;
left:0px;
right:0px;
top:0px;
bottom:0px
}
. divheaderid{
Margin-right:auto;
Margin-left:auto;
Overflow:hidden;
Bgcolor:blue;
}
. divcontentid{
Position:absolute;
left:0px;
top:30.5px;
bottom:0px;
right:0px;
Overflow:scroll
}
</style>
<body>
<div class= "Div1all" >
<div class= "Divheaderid" >
<table border= "1" cellspacing= "0" >
<tr style= "height:30px" >
<th width= "100px" >header a</th>
<th width= "100px" >header b</th>
<th width= "100px" >header c</th>
<th width= "100px" >header d</th>
<th width= "100px" >header e</th>
<th width= "100px" >header f</th>
</Tr>
</table>
</div>
<div class= "Divcontentid" >
<table border= "1" cellspacing= "0" >
<c:foreach begin= "1" end= "@" varstatus= "index" >
<Tr>
<TD width= "100px" >${index.index}</Td>
<TD width= "100px" >B</Td>
<TD width= "100px" >C</Td>
<TD width= "100px" >D</Td>
<TD width= "100px" >E</Td>
<TD width= "100px" >F</Td>
</Tr>
</c:forEach>
</table>
</div>
</div>
</body>
Fixed table header
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
