将表格上的列与固定标题对齐 [英] Align columns on table with fixed header

查看:100
本文介绍了将表格上的列与固定标题对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我搜索了所有可以帮助我解决此问题的内容,但没有任何帮助.

I search anything that can help me about this, but nothing help me.

我在此处复制了代码( http://jsfiddle.net/YUyyZ/).错误是固定行(thead)与表格的其余部分(tbody)没有对齐.

I copied here (http://jsfiddle.net/YUyyZ/) the code. The error is that the fixed row (thead) isn't aligned to the rest of the table (tbody).

我该怎么办?非常感谢.

What can I do? Thanks a lot.

HTML:

<table id=ff witdh=100 style=position:absolute;top:0;bottom:0;left:0;right:0; border=1 cellpadding=4 cellspacing=0>

  <thead>
   <th align='center'> id </th>
   <th align='center'> aaaaaaa </th>
   <th align='center'> asdasdad </th>
   <th align='center'> adasd </th>
   <th align='center'> herh4e45h </th>
   <th align='center'> h4eh4ehg4 </th>
   <th align='center'> gh4gh4ege </th>
   <th align='center'> ehtre </th>
   <th align='center'> brebebes </th>
   <th align='center'> berberb </th>
   <th align='center'> erberberb </th>
   <th align='center'> erberdsber </th>
  <thead><tbody>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>
 <tr>
     <td width=100 align='center'> id </td>
     <td width=100 align='center'> 1 </td>
     <td width=100 align='center'> 2 </td>
     <td width=100 align='center'> 3 </td>
     <td width=100 align='center'> 4 </td>
     <td width=100 align='center'> 5 </td>
     <td width=100 align='center'> 6 </td>
     <td width=100 align='center'> 7 </td>
     <td width=100 align='center'> 8 </td>
     <td width=100 align='center'> 9 </td>
     <td width=100 align='center'> 0 </td>
     <td width=100 align='center'> 11 </td>
  </tr>

CSS:

table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border:#ccc 1px solid;

border-radius:3px;
border-collapse:collapse; border-spacing: 0; 

box-shadow: 0 1px 2px #d1d1d1;
}
table th {
padding:10px 10px 10px 10px;
border-top:0;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;

background: #ededed;
}
table th:first-child {
text-align: left;
}
table tr:first-child th:first-child {
border-top-left-radius:3px;
border-left: 0;
}
table tr:first-child th:last-child {
border-top-right-radius:3px;
}
table tr {
text-align: center;
}
table td:first-child {
text-align: left;
border-left: 0;
}
table td {
padding:10px;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
}
table tr:last-child td {
border-bottom:0;
}
table tr:last-child td:first-child {
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
border-bottom-right-radius:3px;
}
table tr:hover td {
background: #f2f2f2;

}
table th, table td {
width: 160px;

}
#wrapper {
width: 100%;
height: 100%;
}
table thead
{
position:fixed;
}

推荐答案

只需删除`标签. :) 应该是固定的,经过测试的. 工作提琴: http://jsfiddle.net/dLQ6J/

Simply remove the ` tags. :) Should be fixed, tested. Working fiddle: http://jsfiddle.net/dLQ6J/

添加了一些jQuery:

Added some jQuery:

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});

警告:要在包含<script>标签中的代码的页面上运行jQUERY,请不要忘记也添加jQuery JS: 您是否包含jQuery Javascript?要在页面上运行jQuery,您还必须包括以下内容:

WARNING: TO RUN jQUERY ON A PAGE INCLUDE THE CODE IN <script> tags, don't forget to add the jQuery JS too: Did you include the jQuery Javascript ? To run jQuery on a page you must also include this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

没有上面的行将不起作用:)

Without the line above it won't work :)

这篇关于将表格上的列与固定标题对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆