Prevent table header from scrolling vertically (to work in IE 11)

Question

I'm stuck using IE 11 as a rendering engine in my Windows app. I know that there are quite a lot of examples how to prevent a table header from scrolling vertically, but I can't seem to make them work in IE. Is there any way to make it work there?

Here's an example of HTML I'm using for the table:

<table width='100%' border='0' cellpadding='0' cellspacing='0'>
 <thead>
  <tr>
   <th scope='col'>Col 1</th>
   <th scope='col'>Col 2</th>
   <th scope='col'>Col 3</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>---</td>
   <td>---</td>
   <td>---</td>
   <td>---</td>
  </tr>
  <tr>
   <td>+++</td>
   <td>+++</td>
   <td>+++</td>
   <td>+++</td>
  </tr>
 </tbody>
</table>

I need to make sure that the thead stays on top of the table no matter how long the list of rows in it is.

score 1 · Answer 1 · answered Feb 07 '22 at 07:28

I searched similar threads and I found that this solution works in IE 11. It uses another table with a fixed position to show the header at the top of the page when scroll.

You can refer to the sample code below. It works well in IE 11:

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead");
var $fixedHeader = $("#header-fixed").append($header.clone());

$(window).bind("scroll", function() {
  var offset = $(this).scrollTop();

  if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
    $fixedHeader.show();

    $.each($header.find('tr > th'), function(ind, val) {
      var original_width = $(val).width();
      $($fixedHeader.find('tr > th')[ind]).width(original_width);
    });
  } else if (offset < tableOffset) {
    $fixedHeader.hide();
  }
});

#header-fixed {
  position: fixed;
  top: 0px;
  display: none;
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<table width='100%' border='0' cellpadding='0' cellspacing='0' id="table-1">
  <thead>
    <tr>
      <th scope='col'>Col 1</th>
      <th scope='col'>Col 2</th>
      <th scope='col'>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
    <tr>
      <td>---</td>
      <td>---</td>
      <td>---</td>
    </tr>
    <tr>
      <td>+++</td>
      <td>+++</td>
      <td>+++</td>
    </tr>
  </tbody>
</table>
<table id="header-fixed"></table>

@c00000fd I test many solutions including sticky polyfills, but only this way works well in IE 11. In other solutions, the table header's width will change after scroll. Besides, IE 11 will be retired and go out of support on June 15, 2022. I suggest you can move to a modern browser and don't take too much time on fixing IE 11 issues. — Yu Zhou, Feb 09 '22 at 03:29
Thank you for doing that. As for not using IE, as I mentioned in the original post, it is used as a part of the Windows desktop app. It is called "web browser control" and I can't use anything else, because there's nothing else available. Also as for "retiring IE", Microsoft cannot possibly do it. The "retiring" part is for general public so that they stop using it for web browsing. Otherwise it is deeply baked into OS (Windows) and retiring it means that a lot of things in Windows will stop working. So this will never happen. But I agree that it's a horrible rendering engine. — c00000fd, Feb 09 '22 at 05:27
Yes, you're right. The retirement is only for IE 11 desktop application on some versions of Windows. WebBrowser control can still be used. I'm not sure if you can use other rendering engine. If you can, I think [WebView2 control](https://learn.microsoft.com/en-us/microsoft-edge/webview2/) is a good choice. It uses Edge(chromium) as the rendering engine. — Yu Zhou, Feb 09 '22 at 05:47
Thanks. Tbh, I can't stand Chromium. It's such a resource hog. — c00000fd, Feb 09 '22 at 11:57

score 0 · Answer 2 · edited Feb 05 '22 at 21:56

0

So with this what you can do is assign the table itself a relative position but then apply the position:sticky value to the table head class.

There's an article here that I feel can provide a bit more value as well https://css-tricks.com/position-sticky-and-table-headers/

In the future, it would also help if we could see the CSS you're using; so we can let you know if you're on the right track.

edited Feb 05 '22 at 21:56

Dharman

30,962
25
85
135

answered Feb 05 '22 at 21:51

ThisIsGravy

20
2

IE doesn't support sticky (https://caniuse.com/css-sticky), but a great search term for finding polyfills because it seems to be what is needed. – Sarah Feb 05 '22 at 22:03
@Sarah thanks. Can you please expand on what you meant there? @-ThisIsGravy - there's no CSS relevant to this question. I'm looking for one to make table header stay on top. – c00000fd Feb 06 '22 at 05:46
@c00000fd, it means that the CSS can't be used on the browser you're coding for. Sticky can be used on Edge, Firefox, Chrome, Safari, Opera, IOS Safari, Android Browser, Opera Mobile (along a few others) – ThisIsGravy Feb 07 '22 at 13:20

Prevent table header from scrolling vertically (to work in IE 11)

2 Answers2