1

Here is the scenario. I've a table which populates data on scroll. It contains large number of rows. And on each scroll width of th changes dynamically. The table is built with knockoutjs. Please find below the structure of th.

<th data-bind="style: { 'min-width': minWidth + 'px', width: width + '%', height: '25px', 'text-align': 'center' }" style="min-width: 20px; width: 9.30232558139535%; height: 25px; text-align: center;">
    <div class="headerCell" data-bind="click: click" style="width: 136px;">
        <div class="headerText" style="text-align: center;">
            <div class="headerName" data-bind="attr:{title: name}, text: name" title="Name">Name</div>
            <div style="float: right; margin-top: 10PX; MARGIN-right: 1px;" data-bind="css: { 'arrow-up': sortType() == 'Asc', 'arrow-down': sortType() == 'Desc' }" class=""></div>
        </div>
    </div>
</th>

The text of th is contained within in a div. The classes headerCell and headerText are as below:

.headerCell{
    position: absolute;
    background: transparent;
    line-height: 20px;
    top: 0;
    margin-left: -1px;
    cursor: pointer;
}
.headerText{
    left: 0;
    margin: 0;
    width: 100%;
    color: white;
    background-color: #333333;
}

Now here th remains fixed but the ths does not align with td of tbody. Sometime it aligns and sometime it does not. This works properly in Firefox. The issue comes in chrome browser.

I tried to fix it with jquery plugins as well but none of them worked.

How do fix the issue of th changes it's position when the width of th is assigned dynamically?

3
  • Sticky table headers are really tricky to realize. Read this tutorial about it. There is a new CSS-Property called position:sticky;, but it isn't supported by all browsers. If you want to get a good answer here, you should post a code snippet. Oherwise it is to hard to figure out your problem.
    – Jan Hommes
    Nov 6, 2014 at 8:17
  • position:sticky; has been discontinued by google - @JanHommes
    – Valay
    Nov 6, 2014 at 8:23
  • That's why I didn't post it as an answer. They showed another solution with jQuery in that tutorial. Did you read it?
    – Jan Hommes
    Nov 6, 2014 at 8:55

1 Answer 1

1

I solve sticky headers with a plugin that is a little smarter about handling widths than I am with my custom rolled CSS and HTML. Datatables is my weapon of choice.

Here's a working demo: https://datatables.net/extensions/fixedheader/

One hidden benefit -- it's going to be far less markup for the browser (and you) to deal with. If you go this route and use the HTML table option, don't forget to use properly formatted html tables with <head> and <body> elements, as Datatables is quite particular.

7
  • I've created the table with knockoutjs and th width changes dynamically in scroll. Is there any way to resolve in current scenario ???
    – Valay
    Nov 6, 2014 at 17:57
  • Knockout shouldn't throw any barriers. I've used Datatables with standard HTML, Backbone, Angular, etc. Here's a basic example from the Datatables site, you'd just have to modify using the fixed header as shown above: datatables.net/dev/knockout Nov 6, 2014 at 18:48
  • To add to that, you might rethink how you handle data. Rather than loading on scroll is a endless scroll type model, how about doing a "pipeline query" style grab of data, where you get a number, say 25 results, then page them 10 at a time. That way, you're giving the user a more smooth experience (less loading) but also not overwhelming the get action and slowing things down. It becomes important to use a method like that as datasets grow to tens of thousands or millions even. Search and filter features allow you to get around the data in a hurry and get to the point of what they want. Nov 6, 2014 at 18:52
  • I tried out with datatable but couldn't achieve the requirement. Data is loaded progressively on scroll in table. I also tried with sDom to wrap table in a div and apply overflow-y:auto and overflow-x:visible to it. But only vertical scroll works, horizontal doesn't work.
    – Valay
    Nov 7, 2014 at 16:50
  • Chako, as a UI developer, I'd STRONGLY recommend avoiding horizontal scroll...it's just not user friendly (AT ALL!) IF you have too many fields, consider doing show/hide fields to allow users to choose what they see, and initially show them the ones that seem most important. IT'll be WAY more usable in the long run, regardless of technology. Nov 7, 2014 at 17:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.