将表格上的列与固定标题对齐答案

【问题标题】：Align columns on table with fixed header将表格上的列与固定标题对齐
【发布时间】：2014-02-17 12:53:56
【问题描述】：

我搜索任何可以帮助我的东西，但没有任何帮助。

我将代码复制到这里 (http://jsfiddle.net/YUyyZ/)。错误是固定行（thead）未与表的其余部分（tbody）对齐。

我能做什么？非常感谢。

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

【问题讨论】：

标签： html css alignment html-table

【解决方案1】：

根据我的经验，当您固定表格顶部（thead）时，它的列宽可能与绝对或相对定位的 tbody 或表格主体不同。

我过去解决此问题的方法是使用 JavaScript 查找标题中每列的宽度，并将正文的宽度设置为这些值。

我会尝试将一些代码放在一起。

基本上循环遍历标题中的每一列并将宽度存储在一个数组中，然后循环遍历正文并将每个单元格宽度设置为适当的列宽以匹配标题。

在 jQuery 中 - 至少与纯 JavaScript 相比对我来说要容易得多：

$(文档).ready(函数() { $('table#ff thead tr th').each(function(index) { var thisWidth = $(this).width(); $('table#ff tbody tr td').eq(index).css('minWidth', thisWidth); }); });

我认为这应该可行 - 可能需要稍作改动，但总体思路就在那里。

【讨论】：

查看jQuery代码是否修复了布局问题，刚刚添加了
嗨！我在我的服务器和 jsFiddle 上对其进行了测试，但它不起作用......我不懂 jQuery 语言，所以除了复制和粘贴之外，我无法编辑任何内容，抱歉。
在表格后面不带#ff 试试 - 我认为那是表格的 ID？
将宽度函数更改为计算宽度，而不是 CSS - 如果您复制新的 JS，它现在应该可以工作
不起作用 --> jsfiddle.net/YUyyZ/4 可能我在添加 jQuery 时做错了...非常感谢您的帮助！

【解决方案2】：

只需删除 ` 标签。 :) 应该修复，测试。工作小提琴： http://jsfiddle.net/dLQ6J/

添加了一些 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();
    }
});

警告：要在页面上运行 jquery，请在 <script> 标签中包含代码，不要忘记添加 jQuery JS：你包括了 jQuery Javascript 吗？要在页面上运行 jQuery，您还必须包含以下内容：

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

如果没有上面的行，它将无法工作:)

【讨论】：

嗨！谢谢！但是您的代码没有修复第一行。 :(
哦，你想让表格内容滚动但标题静止吗？
嗨！在 jsfiddle 上效果很好，但在我的网络上，复制和粘贴，不是。我在 Codepen (codepen.io/anon/pen/AFkJt) 上看到了，而 JSBin (jsbin.com/ogEwuLEt/1) 不起作用……为什么？
是的，我已经下载并放入了js文件夹。我已经将它用于单元格上的颜色。
使用你的代码，直接不会在我的 js 上运行任何其他东西，但我会奖励它，因为它可以帮助我改变其他事情。谢谢！ :D

【解决方案3】：

你有一个错字

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

试试width=100%。

请注意，当您将元素设置为 position:fixed 时，会将其从流中取出，并且百分比宽度是文档的百分比，而不是原始父元素的百分比。

【讨论】：

更正了错字，但它不起作用...关于位置：已修复，我知道，谢谢 ;)

【解决方案4】：

擦除位置 :fixed 到你的头{position: fixed}

【讨论】：