惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

L
Lohrmann on Cybersecurity
K
Kaspersky official blog
C
Cyber Attacks, Cyber Crime and Cyber Security
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
P
Palo Alto Networks Blog
Scott Helme
Scott Helme
P
Proofpoint News Feed
量子位
S
Schneier on Security
AWS News Blog
AWS News Blog
N
Netflix TechBlog - Medium
T
Threat Research - Cisco Blogs
T
Threatpost
Cisco Talos Blog
Cisco Talos Blog
L
LINUX DO - 热门话题
T
The Exploit Database - CXSecurity.com
A
Arctic Wolf
S
Securelist
T
Tailwind CSS Blog
T
Tor Project blog
Last Week in AI
Last Week in AI
Martin Fowler
Martin Fowler
I
InfoQ
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
C
CXSECURITY Database RSS Feed - CXSecurity.com
C
Cisco Blogs
D
DataBreaches.Net
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
T
Tenable Blog
The GitHub Blog
The GitHub Blog
V
Vulnerabilities – Threatpost
V
Visual Studio Blog
博客园 - 叶小钗
F
Full Disclosure
Know Your Adversary
Know Your Adversary
N
News and Events Feed by Topic
Engineering at Meta
Engineering at Meta
S
SegmentFault 最新的问题
The Last Watchdog
The Last Watchdog
H
Hacker News: Front Page
阮一峰的网络日志
阮一峰的网络日志
D
Docker
Spread Privacy
Spread Privacy
T
The Blog of Author Tim Ferriss
S
Security @ Cisco Blogs
Attack and Defense Labs
Attack and Defense Labs
MyScale Blog
MyScale Blog
腾讯CDC
Recent Announcements
Recent Announcements
Stack Overflow Blog
Stack Overflow Blog

博客园 - antony.net

移动版网页自动缩放问题 2011年国内五款值得关注网店系统 Enterprise Architect 7 入门教程大全 Enterprise Architect 业务过程建模 不同浏览器处理后退的一些异同 - antony.net - 博客园 23个.NET开源项目 mysql 存储过程 游标 js代码库 Hash Tables in Javascript 在非UI线程中改变UI控件属性的通用方法 RSClientPrint打印 统计sql语句 文档格式批量转换(doc,txt,pdf等) 了解HTTP Headers的方方面面 XmlSerializer 常见问题疑难解答 webservices 水晶报表 - antony.net - 博客园 Build a Custom RadioButton Cell and Column for the DataGridView Control .NET 2.0 - WinForm Control - DataGridView 编程36计(二)
table css 固定表头 - antony.net
antony.net · 2010-11-19 · via 博客园 - antony.net

<html>
<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>
</tr>
<tr class="scrollColThead"  >
  <th class="scrollRowThead scrollCR"  >h1</th>
  <th >h2</th>
  <th >h3</th>
  <th >h4</th>
  <th >h5</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>
</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>
</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>
</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>
</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>
</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>
</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>
</tr>
</table>
</div>
</body>

</html>

 <html>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    
<title>固定表头和列</title>
    
<style>

        .FixedTitleRow

{
            position
: relative; 
            top
: expression(this.offsetParent.scrollTop); 
            z-index
: 10;
            background-color
: #E6ECF0;
        
}
        
        .FixedTitleColumn
        
{
            position
: relative; 
            left
: expression(this.parentElement.offsetParent.scrollLeft);
        
}
        
        .FixedDataColumn
        
{
            position
: relative;
            left
: expression(this.parentElement.offsetParent.parentElement.scrollLeft);
            background-color
: #E6ECF0;
        
}
    
</style>
</head><body>
<div id="scrollDiv" style="width: 300px; overflow: auto; cursor: default; display: inline;
    position: absolute; height: 200px;"
>
    
<table id='accountTable' width='500' height='230' cellpadding='0' cellspacing='0'
        
style='table-layout: auto' bordercolor='lightgrey'>
    
<tbody>
    
<tr class="FixedTitleRow">
        
<td class="FixedTitleColumn">ID0</td>
        
<td class="FixedTitleColumn">CK0</td>
        
<td class="FixedTitleColumn">Code0</td>
        
<td class="FixedTitleColumn">Descirption0</td>
        
<td class="FixedTitleColumn">TOL0</td>
        
<td>XS0</td>
        
<td>SS0</td>
        
<td>MS0</td>
        
<td>DS0</td>
        
<td>BS0</td>
        
<td>XL0</td>
        
<td>ML0</td>
        
<td>DL0</td>
        
<td>EM0</td>
        
<td>BM0</td>
    
</tr><tr>
        
<td class="FixedDataColumn">88</td>
        
<td class="FixedDataColumn">88</td>
        
<td class="FixedDataColumn">88</td>
        
<td class="FixedDataColumn">88</td>
        
<td class="FixedDataColumn">88</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
        
<td>22</td>
    
</tr><tr>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">1111</td>
        
<td class="FixedDataColumn">This is Test</td>
        
<td class="FixedDataColumn">1</td>
        
<td>001</td>
        
<td>002</td>
        
<td>003</td>
        
<td>004</td>
        
<td>005</td>
        
<td>006</td>
        
<td>007</td>
        
<td>008</td>
        
<td>009</td>
        
<td>010</td>
    
</tr><tr>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">1111</td>
        
<td class="FixedDataColumn">This is Test</td>
        
<td class="FixedDataColumn">1</td>
        
<td>001</td>
        
<td>002</td>
        
<td>003</td>
        
<td>004</td>
        
<td>005</td>
        
<td>006</td>
        
<td>007</td>
        
<td>008</td>
        
<td>009</td>
        
<td>010</td>
    
</tr><tr>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">111</td>
        
<td class="FixedDataColumn">1111</td>
        
<td class="FixedDataColumn">This is Test</td>
        
<td class="FixedDataColumn">1</td>
        
<td>001</td>
        
<td>002</td>
        
<td>003</td>
        
<td>004</td>
        
<td>005</td>
        
<td>006</td>
        
<td>007</td>
        
<td>008</td>
        
<td>009</td>
        
<td>010</td>
    
</tr>
    
</tbody>
    
</table>
</div>
</body></html>