顶部带有固定标题的表格答案

【问题标题】：table with fixed header at top顶部带有固定标题的表格
【发布时间】：2012-01-30 22:59:50
【问题描述】：

我正在尝试为来自我们数据库的数据创建一个顶部带有固定标题的表。当我添加'位置：固定;'到标题的 css 它将它保持在顶部，但它强制整个标题到第一列。如何使表格标题位于顶部并与列正确对齐？如果可能的话，我更喜欢 css/html 解决方案。

编辑：我已经尝试了很多我在 SO 和谷歌上找到的 jQuery 解决方案。有些工作，有些不工作。当我将它们与我在页面上运行的其他脚本结合起来时，那些独立工作的人往往会崩溃......

<style>
  .dg_hdr_row{
  position: fixed;
  top:0;
  height: 25px;
  }

  .dg_col1{ width:60%; border: 1px solid #000; padding: 5px;}
  .dg_col2{ width:15%; border: 1px solid #000; padding: 5px;}
  .dg_col3{ width:10%; border: 1px solid #000; padding: 5px;}
  .dg_col4{ width:15%; border: 1px solid #000; padding: 5px;}

</style>

<table width="100%">

 <thead width="100%" >
  <tr width="100%" class="dg_hdr_row" >
   <th width="60%">Column 1</th>
   <th width="15%">Column 2</th>
   <th width="10%">Column 3</th>
   <th width="15%">Column 4</th>
  </tr>
 </thead>

    <tbody>
        <tr class="dg_row">
            <td class="dg_col1"></td>
            <td class="dg_col2"></td>
            <td class="dg_col3"></td>
            <td class="dg_col4"></td>
        </tr>
        <tr class="dg_row">
            <td class="dg_col1"></td>
            <td class="dg_col2"></td>
            <td class="dg_col3"></td>
            <td class="dg_col4"></td>
        </tr>       
    </tbody>
</table>

【问题讨论】：

stackoverflow.com/questions/684211/…的可能重复
戳完之后，它可以在 Chrome 中运行（肯定是 17，之前没有任何线索），但不能在 Firefox 或 IE 9 中运行。
@SKS - 我还认为这不是重复的，因为这是一种特定情况，而不是关于如何完成粘性标头的一般要求。另一个问题专门询问了一个 jQuery 插件。
@SKS：我尝试了很多关于该问题的“答案”，但都不起作用。
@derekerdmann：我正在使用 Chrome 16...我认为 17 还没有发布。它在我的任何 Chrome、IE 9 和 Firefox 中都无法正确显示。

标签： html css

【解决方案1】：

因此，固定定位存在一些微妙的问题，使这变得特别困难。

固定元素是相对于浏览器视点的

当您声明position: fixed 时，任何附加的位置规则（如left 或top）都将相对于视口本身（屏幕的左上角）放置标题。您也不能使用任何技巧使其相对于其父级，因为每当页面滚动时它都会在同一个位置。这可能不会影响您的网页，但仍然需要考虑。

固定元素在移动浏览器中无法正常工作

我不知道您的具体用例，但值得深思。

固定定位从正常流程中移除元素

据我所知，这就是导致问题的原因。当position: fixed 被声明时，该元素实际上打破了页面元素的正常布局和位置，现在在它自己的唯一块中工作。

来自CSS2 spec（这也适用于固定定位）：

在绝对定位模型中，盒子相对于其包含块显式偏移。它完全从正常流程中移除（它对后来的兄弟姐妹没有影响）。一个绝对定位的盒子为正常流子和绝对（但不是固定）定位的后代建立一个新的包含块。但是，绝对定位元素的内容不会围绕任何其他框流动。它们可能会遮盖另一个框的内容（或自己被遮盖），具体取决于重叠框的堆栈级别。

这很好，因为您希望标题浮动在表格上方，但也很糟糕，因为在大多数浏览器中，它与表格的其余部分分开布局。

可能的修复

如果页面上只有您的表格，您应该能够将标题设置为使用width: 100% 并应用与表格其余部分相同的单元格宽度。但是，可能很难使大小正确匹配，尤其是在调整窗口大小时。
使用一些简单的 JavaScript 来显示标题。我知道你想用 HTML 和 CSS 来保留它（我通常也这样做），但是 JavaScript 很适合，因为浮动标题不应该是使用网站的重要部分。它应该可用于支持它的浏览器，但那些不应该仍然能够使用该表。 CSS-Tricks 有一个非常好的技术
(http://css-tricks.com/persistent-headers/)，但您可以通过在您最喜欢的搜索引擎上查找“粘性表格标题”来找到其他人。

【讨论】：

【解决方案2】：

您看过 DataTables 了吗？如果我明白你的意思，这是水平部分：

http://datatables.net/release-datatables/extras/FixedColumns/index.html

【讨论】：

我正在寻找要固定的桌子顶部，而不是左侧
那你看其他例子了吗？它几乎可以用一张桌子做任何事情。 :)

【解决方案3】：

这是解决您问题的有效 HTML/CSS 解决方案。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style>
        body{
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }
        .fixed {
            position: relative;
            width: 100%;
            top: 25px;
            border: 0;
            border-collapse: collapse;
        }
        .fixed td, .fixed th {
            border: 1px solid black;
            height: 25px;
        }
        .fixed tr:first-child {
            display: table;
            position: fixed;
            width: 100%;
            background: #FFFFFF;
        }

      .dg_col1{ width:60%;}
      .dg_col2{ width:15%;}
      .dg_col3{ width:10%;}
      .dg_col4{ width:15%;}

</style>
    </head>

    <body>
        <table class="fixed">
            <tr>
                <th width="60%">Header 1</th>
                <th width="15%">Header 2</th>
                <th width="10%">Header 2</th>
                <th width="15%">Header 2</th>
            </tr>
            <tr>
                <td class="dg_col1">Data 14</td>
                <td class="dg_col2">Data 14</td>
                <td class="dg_col3">Data 14</td>
                <td class="dg_col4">Data 24</td>
            </tr>           

        </table>
    </body>
</html>

【讨论】：

好的，可以在 chrome 中工作，但在 Firefox 中，您需要将 margin-top:-25px 和 margin-left:-1px 广告到 ,fixed tr:first-child 类
您可能需要在 html 中为 ie 或 ff 使用脏 if 语句

【解决方案4】：

如果您正在寻找独立于框架的解决方案，请尝试 Grid：http://www.matts411.com/post/grid/

它托管在 Github 上：https://github.com/mmurph211/Grid

它不仅支持固定页眉，还支持固定左栏和页脚等。不幸的是，它确实需要 Javascript。

【讨论】：

感谢您发布您的答案！请务必仔细阅读FAQ on Self-Promotion。另请注意，每次链接到自己的网站/产品时，都要求发布免责声明。