logo标签列表

固定表头的表格

htmlcss
3
我正在尝试创建一个带有固定标题的表格，以显示从数据库中获得的数据。当我在标题的CSS中添加“position：fixed;”时，它将标题整个强制移到第一列。如何使表头保持在顶部并正确对齐列？如果可能的话，我更喜欢采用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>
2
可能是 https://dev59.com/NnRB5IYBdhLWcg3wN1EQ 的重复问题，该问题涉及到带有固定表头和固定列的 HTML 表格。 - Selvakumar Arumugam
经过试验，它在Chrome中可以运行（确切地说是17版本，之前的版本不确定），但在Firefox和IE 9中不能运行。 - derekerdmann
@SKS - 我认为这不是重复的，因为它是一个特定的情况，而不是一个关于如何实现粘性标题的一般请求。另外一个问题明确要求使用jQuery插件。 - derekerdmann
@SKS: 我尝试了那个问题中的许多“答案”，但它们都不起作用。 - user_78361084
@derekerdmann：我正在使用Chrome 16...我认为17甚至还没有发布。它在Chrome，IE 9和Firefox中都无法正确显示。 - user_78361084
@user522962 - Chrome 17 是当前在开发渠道中的版本，我正在使用它。你还需要耐心地尝试其他与另一个问题中链接到的技术 - 你可能需要放弃部分已完成的工作，并重新构建以符合这些技术所要求的要求。要有耐心；不要因为一次尝试无法完全达到你想要的效果而忽略这些方法。 - derekerdmann
4个回答
5

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

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

当你声明position: fixed时，任何额外的位置规则（如left或top）都会将页眉放置在视口本身（屏幕左上角）相对位置上。你也无法使用任何技巧使其相对于其父元素，因为每当页面滚动时，它都会在同一个位置。尽管这可能对你的网页没有影响，但仍需考虑。

移动浏览器中，固定元素的表现不如预期

我不知道你具体的使用情况，但这是值得思考的问题。

固定定位会导致元素从正常流中消失

就我所知，这就是问题所在。当声明position: fixed时，该元素实际上会突破页面上元素的正常布局和位置，而是在其自己独特的块中运行。

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

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

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

潜在解决方法

  • 如果页面上唯一的内容就是表格，您应该能够将标题设置为使用width: 100%并应用与表格其余部分相同的单元格宽度。不过，当窗口大小调整时，可能很难使大小完全匹配。

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

1
我想让表格的顶部固定，而不是左侧。 - user_78361084
1
你看过其他的例子吗？它几乎可以对表格进行任何操作。 :) - DGM
1

这里是一个可行的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类。 - MadScientist
你可能需要在HTML中使用一个不太优雅的if语句来处理IE或FF。 - MadScientist
0
感谢您发布答案！请务必仔细阅读自我推广的常见问题解答。此外，请注意每次链接到您自己的网站/产品时都需要发布免责声明。 - Andrew Barber
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接