Question

我正在尝试在顶部为我们数据库中的数据创建一个带有固定标头的表。当我添加'position：fixed;'时在标题的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 spec（这也适用于固定定位）：

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

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

潜在修复

如果页面上唯一的内容是您的表格，您应该能够将标题设置为使用width: 100%并应用与表格其余部分相同的单元格宽度。但是，可能很难让尺寸恰好匹配，尤其是在调整窗口大小时。

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

Answer 2

你看过DataTables了吗？如果我明白你的意思，这就是横向部分：

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

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

Answer 4

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

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

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

顶部有固定标题的表格

4 个答案:

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

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

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

潜在修复