`
linhui_dragon
  • 浏览: 150921 次
  • 性别: 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实现的，将表头固定住不滚动，而表格里面的每行数据随滚动条滚动。在显示较多数据时，当用户滚动鼠标中轮时，表格内容会滚动，而表头固定不变，可以将...

    Vue多种方法实现表头和首列固定的示例代码

    有时表格太大，滚动时信息查看不方便，需要对表格进行全局表头、首列固定， 上效果： 一、创建多个表格进行覆盖 思路：当页面滚动到临界值时，出现固定表头、首列 先创建一个活动表格 &lt;!DOCTYPE html&gt; &...

    css+jquery完美实现table表头固定显示(浮动)

    利用css和jquery实现table表头固定（浮动）显示，不复制表格内容，不更改页面元素，完全通过js设置样式来实现。

    利用js+css+html实现固定table的列头不动

    话不多说，跟这小编来一起看下吧 1、CSS &lt;style type="text/css"&gt;... //把表头的宽度设置到会滚动的页头去 var copyWidth = function () { var b = $('#data_tbody').prev().find('tr:last').fi

    jquery插件table表格头部和左侧固定

    大家可能经常需要展示数据或者报表，表头如果滚动上去后，查看数据的类别和字段是个麻烦事情，在这里我们推荐来自tympanus的一个JS实现的 table表头固定效果，相信大家肯定会受益的，这个demo使用了jQuery来实现，...

    html中table固定头部表格tbody可上下左右滑动

    当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下：... &lt;th&gt;标题一&lt;/div&gt;&lt;/th&gt; &lt;th&gt;标题二&lt;/div&gt;&lt;/th&gt; &lt;th&gt;标题三&lt;/div&gt;&lt;/th&gt; &lt;th&gt;标题标题标题标题标题标题标题标题标题四

    网页设计代码大全.doc

    * `&lt;th&gt;`：表头 * `&lt;td&gt;`：表项 * `width`：表格宽度 * `height`：表格高度 * `border`：表格线的粗细 * `bgcolor`：表格背景颜色 * `background`：表格背景图像 五、多媒体 * `&lt;img&gt;`：图像标记 * `src`：图片的...

    从入门到精通HTML5——PDF——网盘链接

    　7.1.3　表格的表头——th 121 　7.2　设置表格基本属性 123 　7.2.1　表格的宽度——width 123 　7.2.2　表格的高度——height 125 　7.2.3　表格的对齐方式——align 126 　7.3　设置表格的边框 127 　7.3.1　...

    JavaScript Table行定位效果

    一开始的需求只是表头部分在滚动时能一直固定在头部，那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative，用ie6/7测试以下代码： Code &lt;!DOCTYPE ...

    html入门到放弃笔记

    4、一个元素允许有多属性，多属性间，排名不分先后，中间用 空格 隔开即可 Demo : 1、创建一个 div 标记 ，增加属性 ，设置 align 属性的值为 center ，设置 id 属性的值为 container，设置 title 属性的值为 这...

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