Table head, tail fixed, intermediate content Height adaptive scrolling

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>

----------------------------------------------------

: Http://files.cnblogs.com/files/leshao/table%E8%A1%A8%E6%A0%BC%E5%86%85%E5%AE%B9%E6%BB%9A%E5%8A%A8-calc%E7%89%88.rar

Thank Xing Friends, Wei and other people's assistance to improve, excellence!

Table head, tail fixed, intermediate content Height adaptive scrolling