顶部带有固定标题的表格

Question

我正在尝试为我们数据库中的数据创建一个顶部带有固定标题的表。当我添加“位置：固定；” 到标题的 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>

Answer 1

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

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

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

固定元素在移动浏览器中无法按预期工作

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

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

据我所知，这就是导致问题的原因。当position: fixed被宣布，该元素实际上爆发的页面元素的正常布局和位置，现在以自己独特的块的工作。

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

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

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

潜在的修复

• 如果页面上只有您的表格，您应该能够设置要使用的标题width: 100%并应用与表格其余部分相同的单元格宽度。但是，可能很难使大小匹配得恰到好处，尤其是在调整窗口大小时。

• 使用一些简单的 JavaScript 来显示标题。我知道你想用 HTML 和 CSS 保留它（我通常也这样做），但 JavaScript 很适合，因为浮动标题不应该是使用网站的重要组成部分。它应该可用于支持它的浏览器，但那些不应该仍然能够使用该表。CSS-Tricks
  ( http://css-tricks.com/persistent-headers/ ) 中有一个非常好的技术，但是您可以通过在您最喜欢的搜索引擎上查找“粘性表标题”来找到其他技术。