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

推荐订阅源

Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
S
Schneier on Security
A
Arctic Wolf
Scott Helme
Scott Helme
S
Securelist
Schneier on Security
Schneier on Security
W
WeLiveSecurity
Attack and Defense Labs
Attack and Defense Labs
Security Latest
Security Latest
Project Zero
Project Zero
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Know Your Adversary
Know Your Adversary
P
Palo Alto Networks Blog
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
Google DeepMind News
Google DeepMind News
P
Proofpoint News Feed
C
Check Point Blog
F
Full Disclosure
Stack Overflow Blog
Stack Overflow Blog
H
Hacker News: Front Page
T
The Blog of Author Tim Ferriss
TaoSecurity Blog
TaoSecurity Blog
Vercel News
Vercel News
A
About on SuperTechFans
N
News and Events Feed by Topic
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
The GitHub Blog
The GitHub Blog
S
Security Affairs
Y
Y Combinator Blog
T
The Exploit Database - CXSecurity.com
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Forbes - Security
Forbes - Security
IT之家
IT之家
WordPress大学
WordPress大学
Last Week in AI
Last Week in AI
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
F
Fortinet All Blogs
N
Netflix TechBlog - Medium
The Register - Security
The Register - Security
Jina AI
Jina AI
云风的 BLOG
云风的 BLOG
T
Tailwind CSS Blog
K
Kaspersky official blog
Hacker News: Ask HN
Hacker News: Ask HN
C
Cisco Blogs
MyScale Blog
MyScale Blog
博客园 - 【当耐特】
T
Threat Research - Cisco Blogs
D
Docker
G
GRAHAM CLULEY

博客园 - 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>