固定表头样式

<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'MyJsp.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<style>
/*表格样式 list_table_fixed*/
table#list_table_fixed {
	border: 1px solid #365d86;
	border-top: none;
	border-left: 1px solid #365d86;
	border-bottom: none;
	border-right: none;
	background: #fff;
	font-size: 12px;
}

table#list_table_fixed tr td {
	font-size: 12px;
	padding: 0px 4px;
	line-height: 22px;
	background: #fff;
	border-right: 1px solid #365d86;
	border-bottom: 1px solid #365d86;
}

table#list_table_fixed thead td {
	text-align: center;
	background: #508dd0;
	color: #ffffff;
	font-weight: bold;
	line-height: 22px;
	height: 22px;
	border-bottom: 1px solid #365d86;
}

table#list_table_fixed tbody td {
	table-layout: fixed;
	word-wrap: break-word;
	word-break: break-all;
}

table#list_table_fixed tbody tr.even td {
	background: #F4F9FF;
}

table#list_table_fixed tbody tr.selected td {
	background: #3d80df;
	color: #ffffff;
}  /*自然状态*/
table#list_table_fixed tbody tr.ruled td {
	color: #000;
	background-color: #CBE1FF;
}  /*鼠标经过*/
table#list_table_fixed tbody tr.click td {
	color: #fff;
	background-color: #3d80df;
}  /*鼠标经过*/
body {
	background: #transparent;
	scrollbar-face-color: #DEDEDE;
	scrollbar-base-color: #F5F5F5;
	scrollbar-arrow-color: black;
	scrollbar-track-color: #F5F5F5;
	scrollbar-shadow-color: #EBF5FF;
	scrollbar-highlight-color: #F5F5F5;
	scrollbar-3dlight-color: #C3C3C3;
	scrollbar-darkshadow-Color: #9D9D9D;
}

.fixedDiv {
	overflow: auto;
	height: expression(document . body . clientHeight -   195);
	width: expression(document . body . clientWidth *   0.98);
}

.fixedHeaderTr {
	position: relative;
	top: expression(this . offsetParent . scrollTop);
	z-index: 20;
}

.TableRow1 {
	left: expression(parentNode . parentNode . parentNode . parentNode . 
			 scrollLeft);
	position: relative;
	z-index: 10;
}

.TableRow2 {
	left: expression(parentNode . parentNode . parentNode . parentNode .
		scrollLeft);
	position: relative;
	z-index: 30;
}
</style>
	</head>

	<body>
		<div class="fixedDiv">
			<table width="98%" align="center" cellspacing="0" border="0"
				id="list_table_fixed">
				<thead>
					<tr class="fixedHeaderTr">
						<td nowrap="nowrap" class="TableRow2">
							序号
						</td>
						<td nowrap="nowrap">
							姓名
						</td>
						<td nowrap="nowrap">
							语文
						</td>
						<td nowrap="nowrap">
							数学
						</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="TableRow1">
							1
						</td>
						<td>
							蓝魔
						</td>
						<td>
							87
						</td>
						<td>
							88
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

 

固定表头样式_第1张图片

你可能感兴趣的:(String,table,Class,Path,border,stylesheet)