`
linhui_dragon
  • 浏览: 155916 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

如何让表头th不滚动

 
阅读更多
表格带滚动条  如何让表头th不滚动
 


<div class="admin_data_table">
<table width="100%" cellspacing="0" cellpadding="0" class="tb_title">
  <tr class="tb_title">
    <th width="25%" class="first"> row1 </th>
    <th width="25%" class="tar "> row2 </th>
    <th width="25%" class="tar "> row3 </th>
    <th width="25%" class="last tar ">row4 </th>
  </tr>
</table>
<div class="table_title">
  <table  width="100%" cellspacing="0" cellpadding="0" class="data_week">
      <tr>
        <td width="25%" class="first"> 20120714 </td>
        <td width="25%" class="tar "> 0 </td>
        <td width="25%" class="tar "> 0 </td>
        <td width="25%" class=" tar "> 0 </td>
      </tr>
      <tr class="odd ">
        <td width="25%" class="first"> 20120713 </td>
        <td width="25%" class="tar "> 6 </td>
        <td width="25%" class="tar max_value"> 3 </td>
        <td width="25%" class=" tar "> 5 </td>
      </tr>
      <tr class=" ">
        <td width="25%" class="first"> 20120712 </td>
        <td width="25%" class="tar max_value"> 11 </td>
        <td width="25%" class="tar "> 2 </td>
        <td width="25%" class=" tar max_value"> 26 </td>
      </tr>
      <tr class="odd ">
        <td width="25%" class="first"> 20120711 </td>
        <td width="25%" class="tar "> 2 </td>
        <td width="25%" class="tar "> 1 </td>
        <td width="25%" class=" tar "> 1 </td>
      </tr>
      <tr class=" ">
        <td width="25%" class="first"> 20120710 </td>
        <td width="25%" class="tar "> 0 </td>
        <td width="25%" class="tar "> 0 </td>
        <td width="25%" class=" tar "> 0 </td>
      </tr>
      <tr class="odd ">
        <td width="25%" class="first"> 20120709 </td>
        <td width="25%" class="tar "> 0 </td>
        <td width="25%" class="tar "> 0 </td>
        <td width="25%" class=" tar "> 0 </td>
      </tr>
      <tr class=" ">
        <td width="25%" class="first"> 20120708 </td>
        <td width="25%" class="tar "> 0 </td>
        <td width="25%" class="tar "> 0 </td>
        <td width="25%" class=" tar "> 0 </td>
      </tr>
      <tr class=" data_week">
        <td width="25%" class="first"> 20120714 </td>
        <td width="25%" class="tar "> 0 </td>
        <td width="25%" class="tar "> 0 </td>
        <td width="25%" class=" tar "> 0 </td>
      </tr>
      <tr class="odd ">
        <td width="25%" class="first"> 20120713 </td>
        <td width="25%" class="tar "> 6 </td>
        <td width="25%" class="tar max_value"> 3 </td>
        <td width="25%" class=" tar "> 5 </td>
      </tr>
      <tr class=" ">
        <td width="25%" class="first"> 20120712 </td>
        <td width="25%" class="tar max_value"> 11 </td>
        <td width="25%" class="tar "> 2 </td>
        <td width="25%" class=" tar max_value"> 26 </td>
      </tr>
      <tr class="odd ">
        <td width="25%" class="first"> 20120711 </td>
        <td width="25%" class="tar "> 2 </td>
        <td width="25%" class="tar "> 1 </td>
        <td width="25%" class=" tar "> 1 </td>
      </tr>
      <tr class=" ">
        <td width="25%" class="first"> 20120710 </td>
        <td width="25%" class="tar "> 0 </td>
        <td width="25%" class="tar "> 0 </td>
        <td width="25%" class=" tar "> 0 </td>
      </tr>
      <tr class="odd ">
        <td width="25%" class="first"> 20120709 </td>
        <td width="25%" class="tar "> 0 </td>
        <td width="25%" class="tar "> 0 </td>
        <td width="25%" class=" tar "> 0 </td>
      </tr>
  </table>
  </div><!-- / table_title -->
  </div><!-- / admin_data_table -->




<style type="text/css">
	.admin_data_table {
		background: none repeat scroll 0 0 #FFFFFF;
		border: 1px solid #DDDDDD;
		width: 300px;
		margin:0 auto;
	}
	.admin_data_table .tb_title th{
		text-align: center;
		padding:5px;
	}
	.table_title {
	       overflow-y:scroll;
		height:200px;
		overflow-x: hidden;//不加此属性，在IE7下会出现横向滚动条 
	}
	.table_title  .data_week td{
		text-align: center;
		padding:5px;
		border:1px solid #ccc;
	}
	.tar {
		text-align: center;
	}
	.last {
		padding-right:15px;
	}
</style>




http://www.dewen.org/q/4754
分享到：
| 常用JS验证
评论
发表评论

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

相关推荐

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

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

    纯CSS实现表头固定表格滚动条效果

    同时，可能需要对`th`和`td`的边框进行一些调整，以确保在滚动时表头和主体之间的连接看起来平滑。 以上就是纯CSS实现表头固定表格滚动条效果的基本步骤。通过这种方式，你可以轻松地将这个功能集成到JSP、ASP、PHP...

    gridview固定表头 横向滚动 纵向固定

    "GridView固定表头横向滚动纵向固定" GridView是一个基于ASP.NET的数据控件，用于显示数据表格。然而，在默认情况下，GridView的表头无法固定在屏幕上，使得用户体验不佳。为了解决这个问题，本文将介绍如何实现...

    jQuery实现表头固定表格内容滚动效果

    在网页设计中，当表格数据过多时，为了保持良好的用户体验，常常需要实现表头固定而内容可滚动的效果。`jQuery`作为一个广泛使用的JavaScript库，提供了丰富的功能和便利的方法来实现这种效果。本教程将深入探讨如何...

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

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

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

    然而，当表格内容过多导致无法在单个视窗内完全显示时，滚动条就会出现，这时表头对齐问题就显得尤为重要。为了解决"table内容出现滚动条和表头对齐问题"，我们需要深入理解表格布局、CSS样式控制以及可能涉及到的...

    gridview固定表头的一个具体实例----横向滚动 纵向滚动

    为了让表头能够始终保持在视图的顶部，除了上述CSS样式外，还需要进一步利用JavaScript来辅助实现这一功能。可以考虑使用jQuery或其他库来简化操作。例如，监听滚动事件，并根据当前滚动位置动态调整表头的位置。 `...

    固定表格的表头，使表体自动生成滚动条

    然而，当表格内容过多时，为了保持页面的清晰性，我们通常会希望表头（Header）固定不动，而表体（Body）部分能滚动显示。这个功能在ASP.NET中可以实现，通过设置CSS样式和HTML结构，我们可以创建一个具有固定表头且...

    Jquery表格添加滚动条插件，固定表头

    表头中的`&lt;th&gt;`元素用于定义列名，而表体中的`&lt;tr&gt;`和`&lt;td&gt;`元素则表示行和单元格。 在jQuery中，我们可以通过监听窗口滚动事件(`$(window).scroll()`)来动态添加滚动条。当表格内容超过可视区域时，我们可以将表头...

    解决layui表格的表头不滚动的问题

    这样做是为了让表头保持固定，不随滚动条移动。第二个 table 只包含表体，不包含表头，这样可以确保 tbody 部分能够正常滚动。 2. 对于第二个 table，我们需要将其包裹在一个具有固定高度和宽度的 div 元素内。通过...

    jQuery实现固定表头标题栏让表格数据在滚动栏里滚动.zip

    这个主题正是“jQuery实现固定表头标题栏让表格数据在滚动栏里滚动”的核心所在。 jQuery是一个轻量级、高性能的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。在本案例中，我们将利用...

    asp.net webform冻结列 冻结表头 复杂表头

    在ASP.NET WebForm开发中，有时我们需要创建具有复杂布局的表格，例如，表格可能需要有冻结的列或表头，以便用户在滚动时始终保持关键信息可见。这种功能在处理大量数据或者多列分类的场景中尤其有用。下面将详细...

    固定表格表头的代码

    在网页设计中，固定表格表头是一项常见的需求，特别是在数据量大、需要横向或纵向滚动查看的场景下。固定表头可以使用户在滚动内容时始终能看到列名，从而提高数据可读性和用户体验。本篇文章将深入讲解如何实现...

    移动端table固定表头与固定第一列

    在移动端，由于屏幕宽度限制，我们需要让表头和第一列在滚动时保持固定。 固定表头的实现主要依赖CSS的定位属性。我们可以将`&lt;thead&gt;`设置为相对定位（position: relative），然后给它一个较大的z-index值，使其...

    gridview固定表头的一个实例

    描述：GridView固定表头 横向滚动 纵向固定，即拖动横向滚动条时，表头随着表体移动，纵向拖动滚动条时，表头固定不动实践中所得一个具体实例VS2010，C#。 标签：GridView表头 横向滚动 纵向固定 在这个实例中，...

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

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

    jQuery表格顶部与左右两侧固定滚动代码

    在网页设计中，数据展示是不可或缺的一部分，而大型表格的数据展示常常会遇到浏览难题，比如随着列数增多，用户需要不断滚动水平轴来看完整信息。为了解决这一问题，"jQuery表格顶部与左右两侧固定滚动代码"应运而生...

    实现固定表头表格的总结

    在网页设计中，实现固定表头的表格是一个常见的需求，特别是在数据量大、需要滚动查看内容的情况下。这种功能可以提供更好的用户体验，使用户在浏览大量数据时仍能保持对列标题的清晰理解。本篇文章将重点讲解如何...

    html 表头固定及列固定

    表头固定的目的是让表格的第一行（通常包含列名）在用户滚动页面时始终保持可见。这可以通过CSS的`position: fixed`属性来实现。以下是一个简单的示例： ```html th { position: sticky; top: 0; z-index: 1; ...

    HTML Table固定表头完美实现

    然而，当表格内容较多，需要滚动查看时，表头（Header）往往随着滚动消失，给用户阅读带来不便。本篇文章将探讨如何通过HTML、CSS以及JavaScript技术，实现HTML表格的固定表头效果，使得在滚动时表头始终保持可见。 ...

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