Question

我已经阅读了很多关于这个主题的文章，并试图实现一些，但我似乎无法做到正确。我有一个简单的HTML表格，用于比较产品：

<table>
  <tr>
    <th>Product:</th>
    <th>Product 1</th>
    <th>Product 2</th>
    <th>Product 3</th>
  </tr>
  <tr>
    <td>Features</td>
    <td>Product 1 features</td>
    <td>Product 2 features</td>
    <td>Product 3 features</td>
   </tr>
   and so the list goes on...
 </table>

我想要的是标题行始终位于活动窗口的顶部，这是我向下滚动时的顶行，因为我的行向下走得很远。我希望标签中的产品名称始终可见，以便用户可以将内容始终与最上一行中的不同产品相关联。

提前谢谢！

Answer 1

我的简单技巧是将标题行与实际数据分开table。此标头表设置为将其位置设为fixed，然后保存结果的下表中margin-top设置了标头表的height。

这会创建标题停留在原位和表格滚动的效果。

此处的基本示例：http://jsfiddle.net/zKDR4/2/

您还可以使用jQuery插件创建固定标头。看看这个http://fixedheadertable.com/真的很容易实现。

修改

正如Anders所提到的，如果你沿着我建议的路线走下去，你需要设置th和td元素的宽度。否则他们不会匹配，因为他们是单独的表。

Answer 2

我遇到了使用行标题（小时）和列标题（天）进行规划的问题。我想保持两者的可见性。应用程序在IFrame中显示内容，因此我在IFrame外部创建了一个水平DIV和一个垂直DIV，其样式为“overflow：hidden”。然后我将滚动与IFrame的“onscroll”事件同步。

以下是我的代码，用于将标题与滚动同步：

window.onscroll = function () {

        try {
            // - Scroll days header (on the top) horizontally
            var offsetX = (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft; // Source: http://stackoverflow.com/questions/2717252/document-body-scrolltop-is-always-0-in-ie-even-when-scrolling
            var header1Div = window.parent.document.getElementById("EntetesColonnes");
            header1Div.scrollLeft = offsetX;

            // - Scroll hours header (on the left) vertically 
            var offsetY = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop; // Source: http://stackoverflow.com/questions/2717252/document-body-scrolltop-is-always-0-in-ie-even-when-scrolling
            var header2Div = window.parent.document.getElementById("HeaderHoursLeft");
            header2Div.scrollTop = offsetY;
        }
        catch (ex) {
            alert("FrmPlanningChirurgien/window.onscroll: " + ex.message);
        }
    }

我的解决方案并不那么简单，因为我必须在“onresize”中设置水平DIV的宽度和垂直DIV的高度。然后这会引起更多的复杂性，因为onResize每秒可能被触发很多次，并且当滚动发生时甚至会在IE8中触发此事件。所以我做了一个setTimeout来防止标题过于频繁地重绘：

var PREVIOUS_frameWidth = 0;
var PREVIOUS_frameHeight = 0;
var timerMakeHeaders = null;

window.onresize = function () {
    try {

        var frameWidth = CROSS.getWindowWidth();
        var frameHeight = CROSS.getWindowHeight();

        if (frameWidth != PREVIOUS_frameWidth || frameHeight != PREVIOUS_frameHeight) {

            // - *** Launch headers creation method
            // - If there is another query to redraw, the Timer is stopped and recreated.
            // - The headers are only redrawn when Timer fires.
            if (timerMakeHeaders != null) {
                window.clearTimeout(timerMakeHeaders);
                timerMakeHeaders = null;
            }
            timerMakeHeaders = window.setTimeout(makeHeaders, 50); 

            // - *** Store new values
            PREVIOUS_frameWidth = frameWidth;
            PREVIOUS_frameHeight = frameHeight;
        }
    } catch (e) { alert("Erreur window.onresize/FrmPlanningChirurgien.aspx : " + e.message); }
}

最后makeHeaders()方法必须调整DIV的大小：

function makeHeaders() {

    // (...)

    var frame = window.parent.document.getElementById("CalendarFrame"); 
    var iframeRect = frame.getBoundingClientRect(); 
    headerDiv.style.width = iframeRect.right - iframeRect.left - 20; // The 20 pixels are here for the vertical scrollbar width
    headerDiv.scrollLeft = frame.scrollLeft;

    // (...)


    var headerHourDiv = window.parent.document.getElementById("HeaderHoursLeft");
    var newHeight = iframeRect.bottom - iframeRect.top - 20 - 7; // The VISIBLE width for the DIV must be equal to IFRAME Width minus the scroll width or height
    headerHourDiv.style.height = newHeight; 
    headerHourDiv.scrollTop = frame.scrollTop;       


}
catch (e) {
    alert("makeHeaders: " + e.message);
}    }

也许有可能不使用IFRAME，并且只使用3个DIVS：每个标头一个，内容最后一个。但我认为机制必须相同：需要在滚动位置之间进行同步。

致以最诚挚的问候，

Answer 3

我使用JSFiddle创建了一个示例，您可以view as a demo。

唯一的缺点是，您需要指定列大小，因为当您使用position: fixed时会丢失标题上的宽度。

这是示例的CSS，HTML与您提供的相同。

thead {
    height: 1em;
}

thead tr {
    position: fixed;
    background-color: #FFF;
}

Answer 4

您可以通过制作div来修复位置。或者它也可以通过添加内联css

来完成

<table style="position:fixed;">
  <tr>
     <th>Product:</th>
     <th>Product 1</th>
     <th>Product 2</th>
      <th>Product 3</th>
  </tr>
  <tr>
    <td>Features</td>
     <td>Product 1 features</td>
     <td>Product 2 features</td>
     <td>Product 3 features</td>
   </tr>
  </table>

滚动时保持标题元素始终在顶部？

4 个答案: