`
hsyd
  • 浏览: 176497 次
  • 性别: Icon_minigender_1
  • 来自: 淄博
社区版块
存档分类
最新评论

html table 标题 不滚动

HTMLIEOperaCSSJavaScript 
阅读更多 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>  
<style type="text/css">  
<!--  
body {  
background: #FFF;  
color: #000;  
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;  
margin: 10px;  
padding: 0  
}  

table, td, a {  
color: #000;  
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif  
}  

.td  
{  
nowrap:’’true’’;  
}  

div.tableContainer {  
clear: both;  
border: 1px solid #963;  
height: 285px;  
overflow: auto;  
width: 100%;  
}  

/* WinIE 6.x needs to re-account for it’’s scrollbar. Give it some padding */  
\html div.tableContainer/* */ {  
padding: 0 16px 0 0  
}  

/* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */  
html>body div.tableContainer {  
height: auto;  
padding: 0;  
width: 740px  
}  

/* Reset overflow value to hidden for all non-IE browsers. */  
/* Filter out Opera 5.x/6.x and MacIE 5.x */  
head:first-child+body div[class].tableContainer {  
height: 285px;  
overflow: hidden;  
width: 756px  
}  

/* define width of table. IE browsers only */  
/* if width is set to 100%, you can remove the width */  
/* property from div.tableContainer and have the div scale */  
div.tableContainer table {  
float: left;  
width: 100%  
}  

/* WinIE 6.x needs to re-account for padding. Give it a negative margin */  
\html div.tableContainer table/* */ {  
margin: 0 -16px 0 0  
}  

/* define width of table. Opera 5.x/6.x and MacIE 5.x */  
html>body div.tableContainer table {  
float: none;  
margin: 0;  
width: 740px  
}  

/* define width of table. Add 16px to width for scrollbar. */  
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */  
head:first-child+body div[class].tableContainer table {  
width: 756px  
}  

/* set table header to a fixed position. WinIE 6.x only */  
/* In WinIE 6.x, any element with a position property set to relative and is a child of */  
/* an element that has an overflow property set, the relative value translates into fixed. */  
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */  
thead.fixedHeader tr {  
position: relative;  
/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */  
top: expression(document.getElementById("tableContainer").scrollTop)  
}  
thead.fixedHeader2 tr {  
position: relative;  
/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */  
bottom: expression(document.getElementById("tableContainer").scrollHeight > document.getElementById("tableContainer").clientHeight ? document.getElementById("tableContainer").scrollHeight - document.getElementById("tableContainer").scrollTop - document.getElementById("tableContainer").clientHeight :0)  
}  

/* set THEAD element to have block level attributes. All other non-IE browsers */  
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */  
/* Filter out Opera 5.x/6.x and MacIE 5.x */  
head:first-child+body thead[class].fixedHeader tr {  
display: block  
}  

/* make the TH elements pretty */  
thead.fixedHeader th {  
background: #C96;  
border-left: 1px solid #EB8;  
border-right: 1px solid #B74;  
border-top: 1px solid #EB8;  
font-weight: normal;  
padding: 4px 3px;  
text-align: center  
}  
/* make the TH elements pretty */  
thead.fixedHeader2 th {  
background: #C96;  
border-left: 1px solid #EB8;  
border-right: 1px solid #B74;  
border-top: 1px solid #EB8;  
font-weight: normal;  
padding: 4px 3px;  
text-align: left  
}  
/* make the A elements pretty. makes for nice clickable headers */  
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {  
color: #FFF;  
display: block;  
text-decoration: none;  
width: 100%  
}  
thead.fixedHeader2 a, thead.fixedHeader2 a:link, thead.fixedHeader a:visited {  
color: #FFF;  
display: block;  
text-decoration: none;  
width: 100%  
}  

/* make the A elements pretty. makes for nice clickable headers */  
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x */  
thead.fixedHeader a:hover {  
color: #FFF;  
display: block;  
text-decoration: underline;  
width: 100%  
}  

/* define the table content to be scrollable */  
/* set TBODY element to have block level attributes. All other non-IE browsers */  
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */  
/* induced side effect is that child TDs no longer accept width: auto */  
/* Filter out Opera 5.x/6.x and MacIE 5.x */  
head:first-child+body tbody[class].scrollContent {  
display: block;  
height: 262px;  
overflow: auto;  
width: 100%  
}  

/* make TD elements pretty. Provide alternating classes for striping the table */  
/* http://www.alistapart.com/articles/zebratables/ */  
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {  
background: #FFF;  
border-bottom: 1px solid #EEE;  
border-left: 1px solid #EEE;  
border-right: 1px solid #AAA;  
border-top: 1px solid #AAA;  
padding: 2px 3px  
}  

tbody.scrollContent tr.alternateRow td {  
background: #EEE;  
border-bottom: 1px solid #EEE;  
border-left: 1px solid #EEE;  
border-right: 1px solid #AAA;  
border-top: 1px solid #AAA;  
padding: 2px 3px  
}  

/* define width of TH elements: 1st, 2nd, and 3rd respectively. */  
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */  
/* Add 16px to last TH for scrollbar padding */  
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */  
head:first-child+body thead[class].fixedHeader th {  
width: 200px  
}  

head:first-child+body thead[class].fixedHeader th + th {  
width: 250px  
}  

head:first-child+body thead[class].fixedHeader th + th + th {  
border-right: none;  
padding: 4px 4px 4px 3px;  
width: 316px  
}  

/* define width of TH elements: 1st, 2nd, and 3rd respectively. */  
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */  
/* Add 16px to last TH for scrollbar padding */  
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */  
head:first-child+body tbody[class].scrollContent td {  
width: 200px  
}  

head:first-child+body tbody[class].scrollContent td + td {  
width: 250px  
}  

head:first-child+body tbody[class].scrollContent td + td + td {  
border-right: none;  
padding: 2px 4px 2px 3px;  
width: 300px  

/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */  
top: expression(document.getElementById("tableContainer").scrollTop)  
}  
-->  
</style>  
</head><body>  
 <script>
   function test() {
    var cH = document.getElementById("tableContainer").clientHeight;
    var sH = document.getElementById("tableContainer").scrollHeight;
    var sT = document.getElementById("tableContainer").scrollTop;
    alert(cH+":"+sH+":"+sT);
   }
  </script>
<div id="tableContainer" class="tableContainer">  
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">  
<thead class="fixedHeader">  
<tr>  
<th><a href="#" onclick="javascript:test();">Header 1</a></th>  
<th><a href="#">Header 2</a></th>  
<th><a href="#">Header 3</a></th>  
<th><a href="#">Header 4</a></th>  
</tr>  
</thead>  
<tbody class="scrollContent">  
<tr>  
<td>Cell Content 1</td>  
<td>Cell Content 2</td>  
<td>Cell Content 3</td>  
<td>Cell Content 4</td>  
 
</tr>  
<tr>  
<td>More Cell Content 1</td>  
<td>More Cell Content 2</td>  
<td>More Cell Content 3</td>  
<td>More Cell Content 4</td>  
</tr>  
<tr>  
<td nowrap>Even More Cell Content 1</td>  
<td nowrap>Even More Cell Content 2</td>  
<td nowrap>Even More Cell Content 3</td>  
<td nowrap>Even More Cell Content 4</td>  
</tr>  

<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr> 
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr> 
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr> 
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr>  
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>And Repeat 4</td>  

</tr> 
<tr>  
<td>And Repeat 1</td>  
<td>And Repeat 2</td>  
<td>And Repeat 3</td>  
<td>最后 7</td>  
</tr>  

</tbody>  

<thead class="fixedHeader2">  
<tr>  
<th><a href="#">合计:</a></th>  
<th colspan=6><a href="#">10000</a></th>  
</tr>  
</thead>  

</table>  
</div>  

</body></html>

 

分享到：
| oracle 删除外键约束 禁用约束 启用约束
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML固定Table标题行的四种方法

    为解决这一问题，开发者通常采用JavaScript来实现Table标题行的固定，使其在滚动时始终保持可见。本文将详细介绍四种不同的JavaScript方法来实现HTML固定Table标题行。 1. **CSS Sticky Positioning** CSS3中的`...

    HTML5_html表格表头固定不滚动内容滚动.rar

    HTML5_html表头固定不滚动而内容滚动的效果，表格是基于Div CSS实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将...

    table内容出现滚动条和表头对齐问题

    为了解决"table内容出现滚动条和表头对齐问题"，我们需要深入理解表格布局、CSS样式控制以及可能涉及到的JavaScript或jQuery解决方案。 首先，让我们了解一下HTML表格的基本结构。一个HTML表格由`&lt;table&gt;`元素开始...

    Table固定指定列进行横向滚动(可拓展)

    标题“Table固定指定列进行横向滚动(可拓展)”就描述了这样一个解决方案。 在这个解决方案中，我们有两个关键文件：`Index.html` 和 `Index.js`。`Index.html` 是页面的结构，它包含了一个表格元素，并且可能已经...

    bootstrap表格固定表头并且tbody部分添加滚动条

    Bootstrap表格在设计网页时是一种非常常用的组件，尤其在处理大量数据时，为了提供更好的用户体验，我们经常需要在tbody部分添加竖向滚动条，同时保持表头固定不动。这样，当用户滚动内容时，表头始终保持可见，便于...

    TABLE滚动条

    标题“TABLE滚动条”涉及到的是在网页或者应用中处理表格数据时的一个常见用户界面元素——滚动条。滚动条通常出现在表格或容器内，当内容超出可视区域时，它允许用户查看和浏览不可见的部分。在IT领域，尤其是前端...

    列表第一列不动，后面滚动

    标题 "列表第一列不动，后面滚动" 描述的是一个常见的网页设计需求，特别是在处理大型数据表格时，为了方便用户查看和对比数据，通常会固定表头（第一列）使其在页面滚动时保持可见，而其他列则随着滚动条移动。...

    四屏上下滚动带标题焦点图代码.zip_Table_四屏上下滚动带标题焦点图代码

    标签“table”表明了这个焦点图的核心是基于HTML表格的结构，而“四屏上下滚动带标题焦点图代码”则说明了这个设计的具体功能。标签还提到了“js”，这意味着JavaScript可能被用来实现焦点图的动态滚动和交互功能，...

    js表头固定,固定table标题行

    本话题将深入探讨“js表头固定”这一技术，主要关注如何使用JavaScript和jQuery来实现固定table标题行的功能。 首先，我们来看"jquery表头固定"。jQuery是一个轻量级、功能丰富的JavaScript库，它简化了HTML文档...

    Scrollable HTML table

    "Scrollable HTML table" 是一个网页设计和前端开发的主题，它涉及到在HTML中创建可滚动的表格。这样的表格允许用户在数据量过大无法一次性完全展示时，通过滚动条查看所有内容。"Source JS and Example" 表示我们将...

    html中table排序

    - HTML的`&lt;table&gt;`标签提供了基本的表格结构，如`&lt;thead&gt;`（表头）、`&lt;tbody&gt;`（主体内容）、`&lt;tfoot&gt;`（表尾）等，但它们不具备排序功能。 - 在没有JavaScript的情况下，用户可以手动操作浏览器的内置功能（如在...

    好看的滚动条样式

    标题中的“好看的滚动条样式”指的是在网页设计中对浏览器默认滚动条进行美化和定制的一种技术。滚动条作为用户浏览长内容时不可或缺的交互元素，其样式和用户体验往往被开发者忽视，但通过自定义，可以提升网站的...

    纯CSS固定表头内容滚动表格

    - 为`&lt;tbody&gt;`设置`margin-top`，值等于`&lt;thead&gt;`的高度，确保内容滚动时不被表头遮挡。 - 可能需要根据不同的浏览器和设备进行兼容性调整，如添加`-webkit-`或`-moz-`前缀，或者使用媒体查询适应不同屏幕尺寸。 ...

    表格头部固定不动，数据滚动插件

    本插件就是专门为此目的设计的，其标题为“表格头部固定不动，数据滚动插件”，描述中提到它提供了详细的使用方法和内容，可从下载包中获取。 这个插件的核心功能是锁定表格的表头部分，使其在用户滚动表格数据时...

    layui 实现table翻页滚动条位置保持不变的例子

    layui table 默认情况下并不会在翻页时保留滚动条的位置。这是因为表格在每一页加载新数据时，原有的DOM元素会被替换，滚动条所关联的div元素也会随之更新，从而导致滚动条回到顶部。为了解决这个问题，我们需要在...

    固定Table第一行或某几行不随滚动条滚动而滚动

    样式： 复制代码代码如下: .fixedHead { position: relative;...复制代码代码如下: &lt;div&gt; &lt;table class=”con_tbl”&gt; ”fixedHead”&gt; 标题不动&lt;/th&gt; &lt;/tr&gt; &lt;PRE class=html name=”code”&gt; &lt;t

    layui-高级表格-soul-table功能-HTML源码

    在IT行业中，HTML表格是网页布局中不可或缺的一部分，尤其在数据展示时，高效且美观的表格设计至关重要。layui是一款优秀的前端框架，它以其简洁、强大的特性受到开发者的喜爱。而soul-table是layui的一个扩展组件，...

Magicbox
Global site tag (gtag.js) - Google Analytics