论坛数据统计           欢迎到【弱电论坛】来学习和讨论问题!

弱电工程项目管理软件
★电工电气产品供求、电气展会、人才、电气技术文章、图库、电气技术论坛等相关内容,请跳转至【电气之家网】--- 可直接使用本站会员名和密码登陆!(首次使用需要激活账户)
标王 热搜: 网络监控  弱电  楼宇对讲  机房及机柜内部的理线方法  门禁  CAD  ar800-hn  综合布线  工资  面板 
 
 
当前位置: 首页 » 技术 » 电脑技术 » 网页网站 » 正文

表头固定的table滚动条效果

放大字体  缩小字体 发布日期:2013-01-21  浏览次数:1605
 
 

网上找到的一个例子,该例子基本解决表头固定,滚动条效果table的问题,但是由于使用固定高度的DIV,当表体(tbody)的高度超过这个高度就出现滚动条效果,但是当高度没有达到DIV所设置的高度时,DIV还是占据不变的一个空间,严重影响美观,所以要把高度设置成动态的。

IE7 开始(包括Firefox,opera)支持min-height和max-height属性来设置DIV的最小高度和最大高度,我们可以利用max- height来设置一个高度,当table体没有超过DIV高度的时候,DIV就自适应到内部table的实际高度,这样就不会出现空白的现象。代码如下:

方案1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Layout-bensysu</title>
<style type="text/css">
html,body {
    margin:0;
    font:12px/180% Verdana, Arial;
    text-align:center;
}
div {
    margin:50px auto 0 auto;
    width:500px;
    max-height:110px;
    overflow:auto;
}
table {
    border:none;
    background:#000;
}
tr {
    background:#fff;
}
th,td {
    padding:0;
}
th {
    background:#f7f7f7;
}
.id {
    width:100px;
}
.name {
    width:200px;
}
.age {
    width:200px;
}
thead tr {
    position:relative;
    top:0;
    background:#000;
}
</style>
</head>
<body>
<div>
<table cellspacing="1">
    <thead>
        <tr>
            <th class="id">ID</th>
            <th class="name">姓名</th>
            <th class="age">年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>24</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>32</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>24</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>32</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>24</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>32</td>
        </tr>
    </tbody>
</table>
</div>
</body>
</html>


 

方案2:


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />

<title>带滚动条的表格 - scroll table</title> 

</head>


 

<style type="text/css">


 

table { 

border-collapse:collapse;

border:0;

width:auto;

table-layout:fixed;

}

 


 

.scrolltable {

height:150px; /* set height here for ie */ 

width:600px;

overflow-y: auto; 

}

.scrolltable tbody {

    height:150x; /* set height here for non-ie */

    *height:auto; /* for ie */

display: block;

overflow: auto;

}

.scrolltable thead {   

display:block; 

background-color:#6C9786; /* firefox needs a background color */

}

.scrolltable thead tr {

position: relative;

}


 

</style>


 

<body>

  <div  class="datatable scrolltable">

<TABLE border=1 id="kk">

<thead>

<TR> 

  <Th>Mapping 公式</th>

  <th>计算顺序</th>

  <th>LNE-S001</th>

  <th>LNE-S002</th>

  <th>LNE-S003</th>

  <th>LNE-S004</th>  

  <th>LNE-S005</th>

  

</TR>

</thead>

<tbody>

<TR>        

  <TD>LNE-F001</TD>

  <td><input type="text"  SIZE=8></input></td>

  <TD><input type="radio" name="S1"></input></TD>

  <TD><input type="radio" name="S1"></input></TD>

  <TD><input type="radio" name="S1"></input></TD>

  <TD><input type="radio" name="S1"></input></TD>

  <TD><input type="radio" name="S1"></input></TD>

</TR>

<TR>

  <td>LNE-F002</td>

  <td><input type="text" SIZE=8 ></input></td>

  <TD><input type="radio" name="S6"></input></TD>

  <TD><input type="radio" name="S6"></input></TD>

  <TD><input type="radio" name="S6"></input></TD>

  <TD><input type="radio" name="S6"></input></TD>

  <TD><input type="radio" name="S6"></input></TD>

</TR>

<TR>

  <TD>LNE-F003</TD>

  <td><input type="text" SIZE=8 ></input></td>

  <TD><input type="radio" name="S2"></input></TD>

  <TD><input type="radio" name="S2"></input></TD>

  <TD><input type="radio" name="S2"></input></TD>

  <TD><input type="radio" name="S2"></input></TD>

  <TD><input type="radio" name="S2"></input></TD>

</TR>

<TR>

  <TD>LNE-F004</TD>

  <td><input type="text" SIZE=8 ></input></td>

  <TD><input type="radio" name="S3"></input></TD>

  <TD><input type="radio" name="S3"></input></TD>

  <TD><input type="radio" name="S3"></input></TD>

  <TD><input type="radio" name="S3"></input></TD>

  <TD><input type="radio" name="S3"></input></TD>

</TR>

<TR>

  <TD>LNE-F005</TD>

  <td><input type="text" SIZE=8 ></input></td>

  <TD><input type="radio" name="S4"></input></TD>

  <TD><input type="radio" name="S4"></input></TD>

  <TD><input type="radio" name="S4"></input></TD>

  <TD><input type="radio" name="S4"></input></TD>

  <TD><input type="radio" name="S4"></input></TD>

</TR>

<TR>

  <TD>LNE-F006</TD>

  <td><input type="text" SIZE=8 ></input></td>

  <TD><input type="radio" name="S5"></input></TD>

  <TD><input type="radio" name="S5"></input></TD>

  <TD><input type="radio" name="S5"></input></TD>

  <TD><input type="radio" name="S5"></input></TD>

  <TD><input type="radio" name="S5"></input></TD>

</TR>

</tbody>

</TABLE>

</div>

<label>需要注意表格的头,必须在滚动时保持不动!</label>

</BODY>

</HTML>


 

方案3(行头 列头):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

 </HEAD>

 <style type="text/css"> 

<!-- 

body,table, td, a {font:9pt;} 

/*重点:固定行头样式*/

.scrollRowThead{position: relative; 

left: expression(this.parentElement.parentElement

.parentElement.parentElement.scrollLeft);

z-index:0;}

/*重点:固定表头样式*/

.scrollColThead {position: relative;

top: expression(this.parentElement.parentElement

.parentElement.scrollTop);

z-index:2;}

/*行列交叉的地方*/

.scrollCR { z-index:3;}

/*div外框*/

.scrollDiv {height:200px;clear: both; 

border: 1px solid #EEEEEE;

OVERFLOW: scroll;width: 320px; }

/*行头居中*/

.scrollColThead td,.scrollColThead th

{ text-align: center ;}

/*行头列头背景*/

.scrollRowThead,.scrollColThead td,.scrollColThead th

{background-color:EEEEEE;}

/*表格的线*/

.scrolltable{

border-bottom:1px solid #CCCCCC; 

border-right:1px solid #CCCCCC; }

/*单元格的线等*/

.scrolltable td,.scrollTable th{

border-left: 1px solid #CCCCCC; 

border-top: 1px solid #CCCCCC; 

padding: 5px; }

--> 

</style>


 <BODY>

  <h1>利用CSS代码让Table产生固定表头</h1>

<h3>www.865171.cn</h3>


<div id="scrollDiv" class="scrollDiv" >

<table border="0" cellpadding="3" cellspacing="0" width="300" class="scrollTable">

<tr class="scrollColThead"  >

  <th class="scrollRowThead scrollCR"  >&nbsp;</th>

  <th colspan="2">列头</th>

  <th colspan="2">列头</th>

  <th colspan="2">列头</th>

  

</tr>

<tr class="scrollColThead"  >

  <th class="scrollRowThead scrollCR"  >h1</th>

  <th >h2</th>

  <th >h3</th>

  <th >h4</th>

  <th >h5</th>

  <th >h6</th>

  <th >h7</th>

</tr>

<tr>

  <td class="scrollRowThead"  >

 <input type="checkbox" name="checkbox" value="checkbox">

 a</td>

  <td>单元格2</td>

  <td>单元格3</td>

  <td>单元格4</td>

  <td>单元格5</td>

  <td>单元格6</td>

  <td>单元格7</td>

</tr>

<tr>

  <td class="scrollRowThead"  >

 <input type="checkbox" name="checkbox2" value="checkbox">

 b</td>

  <td>单元格2</td>

  <td>单元格3</td>

  <td>单元格4</td>

  <td>单元格5</td>

  <td>单元格6</td>

  <td>单元格7</td>

</tr>

<tr>

  <td nowrap class="scrollRowThead"  >

 <input type="checkbox" name="checkbox3" value="checkbox">

 c</td>

  <td nowrap>单元格2</td>

  <td nowrap>单元格3</td>

  <td nowrap>单元格4</td>

  <td nowrap>单元格5</td>

  <td nowrap>单元格6</td>

  <td nowrap>单元格7</td>

</tr>

<tr>

  <td class="scrollRowThead"  >

 <input type="checkbox" name="checkbox4" value="checkbox">

 d</td>

  <td>单元格2</td>

  <td>单元格3</td>

  <td>单元格4</td>

  <td>单元格5</td>

  <td>单元格6</td>

  <td>单元格7</td>

</tr>

<tr>

  <td class="scrollRowThead"  >

 <input type="checkbox" name="checkbox5" value="checkbox">

 e</td>

  <td>单元格2</td>

  <td>单元格3</td>

  <td>单元格4</td>

  <td>单元格5</td>

  <td>单元格6</td>

  <td>单元格7</td>

</tr>

<tr>

  <td class="scrollRowThead"  >

 <input type="checkbox" name="checkbox6" value="checkbox">

 f</td>

  <td>单元格2</td>

  <td>单元格3</td>

  <td>单元格4</td>

  <td>单元格5</td>

  <td>单元格6</td>

  <td>单元格7</td>

</tr>

<tr>

  <td class="scrollRowThead" >

 <input type="checkbox" name="checkbox7" value="checkbox">

 g</td>

  <td>单元格2</td>

  <td>单元格3</td>

  <td>单元格4</td>

  <td>单元格5</td>

  <td>单元格6</td>

  <td>单元格7</td>

</tr>

</table>

</div>

 </BODY>

</HTML>

 
 
 
[ 技术搜索 ]  [ 加入收藏 ]  [ 告诉好友 ]  [ 打印本文 ]  [ 关闭窗口 ]

 
0条 [查看全部]  相关评论

 
点击排行
 
 
 
弱电基础 | 常用软件 | 信息发布规则 | 积分规则 | VIP会员注册 | 广告投放 | 弱电培训 | 联系我们 | 版权声明 | 帮助中心 | 网站地图 | 排名推广 | 京ICP备11008917号-3 | RSS订阅
★本站手机app客户端已上线! 点击下载