欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css固定table表頭的實現(xiàn)代碼可同時看到表頭和表格底部

  發(fā)布時間：2012-12-13 15:30:32   作者：佚名   我要評論
一次性將數(shù)據(jù)全部顯示出來，頁面就會出現(xiàn)滾動條，這樣的話就不能同時看到表頭信息和表格底部的數(shù)據(jù)記錄,把表頭固定可以解決此問題
之前在做一個項目的時候，需要用到表格顯示一個月中每天的相關(guān)信息記錄（一天的信息記錄顯示為一行）。于是有了這樣一個問題，一次性將數(shù)據(jù)全部顯示出來，頁面就會出現(xiàn)滾動條，這樣的話就不能同時看到表頭信息和表格底部的數(shù)據(jù)記錄，把每個月的信息記錄都分為兩頁顯示的話，又麻煩（切換月份后還要在進(jìn)行分頁操作）。把情況跟領(lǐng)導(dǎo)描述了下，表示不知道怎么做好了，領(lǐng)導(dǎo)略微想了下說，“把表頭固定不就行了”。

好吧，固定表頭，我只在Excel中操作過，在頁面上要把table表頭固定，對于我這樣的菜鳥來說，簡直就是“蜀道難，難于上青天”啊。幸虧有“萬能”的度娘啊，還真給我百度到了幾個例子，由于但是急于完成那個效果，沒有記下我采用的那篇博文的地址和博主。這段時間沒什么事兒，回頭把項目中固定table表頭的實現(xiàn)代碼重新整理了下，記錄下來方便以后回顧。
當(dāng)時從百度出來的范例中選了各種實現(xiàn)方法來嘗試，感覺這兩個種方法比較容易理解，實現(xiàn)的思想也差不多，只是代碼的組織上不同而已，今天就把這兩種實現(xiàn)方法都貼出來對比一下。
實現(xiàn)方法一：

復(fù)制代碼
代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 固定表格表頭 </title>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
div{
overflow-y: scroll;
overflow-x: hidden;
height: 100px;
margin-top: 5px;
margin-left: 12px;
padding-top: -2px;
padding-bottom: 5px;
border: 3px solid #009933;
}
table{
width: 100%;
border-color: #d2f1ac;
border-collapse: collapse;
border-top: 0px solid #ffffff;
}
.fixedtd{
position: relative;
z-index: 1;
background: #009933;
text-align: center;
}
</style>
</head>
<body>
<div>
<table border="1">
<tr>
<td class="fixedtd">
固定表頭第一列
</td>
<td class="fixedtd">
固定表頭第二列
</td>
<td class="fixedtd">
固定表頭第三列
</td>
<td class="fixedtd">
固定表頭第四列
</td>
<td class="fixedtd">
固定表頭第五列
</td>
<td class="fixedtd">
固定表頭第六列
</td>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
<td>A5</td>
<td>A6</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
<td>B5</td>
<td>B6</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
<td>C5</td>
<td>C6</td>
</tr>
<tr>
<td>D1</td>
<td>D2</td>
<td>D3</td>
<td>D4</td>
<td>D5</td>
<td>D6</td>
</tr>
<tr>
<td>E1</td>
<td>E2</td>
<td>E3</td>
<td>E4</td>
<td>E5</td>
<td>E6</td>
</tr>
<tr>
<td>F1</td>
<td>F2</td>
<td>F3</td>
<td>F4</td>
<td>F5</td>
<td>F6</td>
</tr>
<tr>
<td>G1</td>
<td>G2</td>
<td>G3</td>
<td>G4</td>
<td>G5</td>
<td>G6</td>
</tr>
<tr>
<td>H1</td>
<td>H2</td>
<td>H3</td>
<td>H4</td>
<td>H5</td>
<td>H6</td>
</tr>
</table>
</div>
</body>
</html>

運行效果如下圖所示：
 
該實現(xiàn)方法的一個不足之處在于：表頭行與下面可滾動的行的寬度相同，div的滾動條顯示在表頭行的下方，覆蓋了可滾動的行中最后一列的部分寬度，如果將div的橫向滾動條也顯示出來的話，那么不管怎樣設(shè)置table和div的寬度，都不能使橫向的滾動條消失（如果表格數(shù)據(jù)行的高度和小于div的高度值時，縱向的滾動條會消失）。
實現(xiàn)方法二：

復(fù)制代碼
代碼如下:

<html>
<head>
<title>CSS控制表格表頭固定</title>
<style type="text/css">
div.tableContainer {
clear: both;
border-collapse: collapse;
border: 2px solid #009933;
height: expression(document.body.clientHeight*0.3);
overflow: auto;
width: 1024px;
}
div.tableContainer table {
float: left;
width: 100%;
border-collapse: collapse;
empty-cells: hide;
}
thead.fixedHeader tr {
position: relative;
top: expression(document.getElementById("tableContainer").scrollTop);
}
thead.fixedHeader th {
background: #009933;
border-left: 1px solid #d2f1ac;
border-right: 1px solid #d2f1ac;
border-top: 1px solid #d2f1ac;
border-bottom: 1px solid #d2f1ac;
font-weight: normal;
padding: 4px 3px;
text-align: center;
}
tbody.scrollContent td, tbody.scrollContent tr td {
border-bottom: 1px solid #d2f1ac;
border-left: 1px solid #d2f1ac;
border-right: 1px solid #d2f1ac;
border-top: 1px solid #d2f1ac;
padding: 2px 3px;
}
</style>
</head>
<body>
<div id="tableContainer" class="tableContainer">
<table>
<thead class="fixedHeader">
<tr>
<th colspan="5">測試效果</th>
</tr>
<tr>
<th>表頭第一列</th>
<th>表頭第二列</th>
<th>表頭第三列</th>
<th>表頭第四列</th>
<th>表頭第五列</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
<td>第一行第四列</td>
<td>第一行第五列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
<td>第二行第四列</td>
<td>第二行第五列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
<td>第三行第四列</td>
<td>第三行第五列</td>
</tr>
<tr>
<td>第四行第一列</td>
<td>第四行第二列</td>
<td>第四行第三列</td>
<td>第四行第四列</td>
<td>第四行第五列</td>
</tr>
<tr>
<td>第五行第一列</td>
<td>第五行第二列</td>
<td>第五行第三列</td>
<td>第五行第四列</td>
<td>第五行第五列</td>
</tr>
<tr>
<td>第六行第一列</td>
<td>第六行第二列</td>
<td>第六行第三列</td>
<td>第六行第四列</td>
<td>第六行第五列</td>
</tr>
<tr>
<td>第七行第一列</td>
<td>第七行第二列</td>
<td>第七行第三列</td>
<td>第七行第四列</td>
<td>第七行第五列</td>
</tr>
<tr>
<td>第八行第一列</td>
<td>第八行第二列</td>
<td>第八行第三列</td>
<td>第八行第四列</td>
<td>第八行第五列</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

運行效果如下圖所示：

相關(guān)文章

最新評論