html 固定表格列头,表格体滚动

2021-01-15  

代码:

<html>
<head>
<style>
*{
	margin:0;
	padding:0;
}
.out-table {
	border:0;
	cellpadding:0;
	cellspacing:0;
}
tr {
	cellpadding:0;
	cellspacing:0;
}
.out-table-head td {
	width:100px;
	cellpadding:0;
	cellspacing:0;
	border:solid black 1px;
}
.out-table-body td {
	width:100px;
	cellpadding:0;
	cellspacing:0;
}
.out-table-body{
	height: 200px;
	overflow-y: auto;
}
.out-table-body::-webkit-scrollbar {
  display: none;
}
.inner-table {
	height: 200px;
}
.inner-table table td{
	width:100px;
	cellpadding:0;
	cellspacing:0;
	border:solid black 1px;
}
</style>
</head>
<body>
<table class="out-table">
	<tr class="out-table-head"><td>1</td><td>1</td><tr>
	<tr>
		<td colspan="2" class="out-table-body">
			<div class="inner-table">
				<table>
					<tr><td>1</td><td>1</td><tr>
					<tr><td>1</td><td>1</td><tr>
					<tr><td>1</td><td>1</td><tr>
					<tr><td>1</td><td>1</td><tr>
					<tr><td>1</td><td>1</td><tr>
					<tr><td>1</td><td>1</td><tr>
					<tr><td>1</td><td>1</td><tr>
					<tr><td>1</td><td>1</td><tr>
					<tr><td>1</td><td>1</td><tr>
					<tr><td>1</td><td>1</td><tr>
					<tr><td>1</td><td>1</td><tr>
				</table>
			<div>
		</td>
	<tr>
<table>
</body>
</html>

 

效果:

 

ConstXiong 备案号:苏ICP备16009629号-3