Table head, tail fixed, intermediate content Height adaptive scrolling
Many times, you need to use the table to do data analysis, whether it is the front-end display, or the Background Management system node display
Work in the process encountered, as a small note, Memo!
As shown
--------------------------------------------------------------------------------------------------------------- ------
--------------------------------------------------------------------------------------------------------------- ---------------
The head of the table, and the tail is fixed, the middle content with the increase in content, and the scroll bar appears.
<!--container-->
<div class= "Container" >
<table class= "form-table" cellpadding= "0" cellspacing= "0" >
<thead class= "Fixed-thead" id= "Head" >
<tr>
<th> Serial Number </th>
<th> name </th>
<th> Sex </th>
<th> Age </th>
</tr>
</thead>
<tbody class= "Scroll-tbody" id= "Body" >
<tr>
<td>1</td>
<td> Zhang San </td>
<td> Men </td>
<td>18</td>
</tr>
</tbody>
<tfoot class= "Fixed-tfoot" >
<tr>
<td> Serial Number </td>
<td> name </td>
<td> Sex </td>
<td> 1 years old </td>
</tr>
</tfoot>
</table>
</div>
<!--container-->
The HTML structure as above is simple. Streamline.
/* Individual Parts style */
@charset "Utf-8";
body{
Overflow:hidden;
}
. container {
border:1px #ccc Solid;
width:90%;
margin:100px Auto;
}
. form-table {
width:100%;
Border-collapse:collapse;
margin:0 Auto;
Text-align:center;
table-layout:fixed;
}
. form-table th {
Border-left:none;
Border-top:none;
border-right:1px #ccc Solid;
border-bottom:1px #ccc Solid;
Background: #F3F3F3;
}
. form-table TD {
Border-left:none;
Border-top:none;
border-bottom:1px #ccc Solid;
border-right:1px #ccc Solid;
}
. Fixed-thead,
. fixed-tfoot {
Display:block;
/*width:99%;*/
Width:-webkit-calc (100%-17px);
Width:-moz-calc () (100%-17px);
Width:calc (100%-17px);
height:50px;
}
. fixed-tfoot TR TD {
Background: #F3F3F3;
Border-bottom:none;
}
. Fixed-thead TR,
. fixed-tfoot TR {
width:100%;
height:50px;
line-height:50px;
Display:block;
}
. fixed-thead TR Th,
. fixed-tfoot TR TD {
Float:left;
Display:block;
width:25%;
height:50px;
font-size:16px;
Text-align:center;
}
. scroll-tbody {
Display:block;
height:306px;
Overflow:auto;
width:100%;
}
. scroll-tbody TR {
width:100%;
Display:block;
height:40px;
line-height:40px;
}
. scroll-tbody TR TD {
Float:left;
Display:block;
width:25%;
}
. form-table. Scroll-tbody Tr:nth-child (ODD) TD {
Background-color: #ECE9D8;
}
-------------------The core alignment style---------------------
Width:-webkit-calc (100%-17px);
Width:-moz-calc () (100%-17px);
Width:calc (100%-17px);
Compatible with advanced browsers
-----------------------------------------------------
In order to be compatible with IE6, the following JS can be used to implement
<script type= "Text/javascript" >
Window.onload=window.onresize=function () {
var Body=document.getelementbyid ("Body");
var Head=document.getelementbyid ("Head");
Head.style.width= (body.scrollwidth) + "px";
}
</script>
----------------------------------------------------
Table head, tail fixed, intermediate content Height adaptive scrolling