如何让表头th不滚动

最新推荐文章于 2022-01-20 10:55:06 发布

linhuiDragon

最新推荐文章于 2022-01-20 10:55:06 发布

阅读量819

点赞数

分类专栏： HTML CSS

本文链接：https://blog.csdn.net/linhuiDragon/article/details/84494405

版权

CSS 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

[color=red][align=center][size=x-large]表格带滚动条如何让表头th不滚动[/size][/align][/color]


<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>