css固定表头,表单内容可以滑动

<html>

<head>

<meta charset="utf-8">

<title>Table</title>

<style type="text/css">

.table{

width: 100%;

border-collapse:collapse;

border-spacing:0;

}

table thead, tbody tr {

display:table;

width:100%;

table-layout:fixed;

}

.fixedThead{

width: calc( 100% - 1em )

}

.scrollTbody{

display: block;

height: 262px;

overflow: auto;

width: 100%;

overflow-y:scroll;

}

.table td,.table th {

width: 200px;

border-bottom: none;

border-left: none;

border-right: 1px solid #CCC;

border-top: 1px solid #DDD;

padding: 2px 3px 3px 4px

}

.table tr{

border-left: 1px solid #EB8;

border-bottom: 1px solid #B74;

}

/*thead.fixedThead tr th:last-child {

color:#FF0000;

width: 218px;

}*/

</style>

</head>

<body >

<table class="table">

<thead class="fixedThead">

<tr><th>header</th><th>header two</th></tr>

</thead>

<tbody class="scrollTbody">

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

<tr><td>fuck 1</td><td>fuck 2</td></tr>

</tbody>

</table>

</body>

</html>