1

I have tried several jQuery libs to get this to work, including floatThead, fixedheadertable and freezeheader but I am having the same issue with each of them. The table looks fine, initially, but as soon as the THEAD sticks to the top of the page, the column widths in the THEAD no longer line up properly.

I am using Twitter Bootstrap 3. How can I make this work properly? Is bootstrap interfering? Does it have something to do with the fact that my first <TR> is 10 <TD>s wide? Colspan issue? Any tips, please?

Here's a screenshot to show you what I mean:

Screenshot of table head in both positions.

My HTML goes something like this:

<div class="table-responsive" style="width:100%;">
    <table class="table table-bordered table-hover table-striped display-tbl" style="width:100%;">
        <tr>
            <td colspan="10">
                <div id="content">
                    <ul id="tabs" class="nav nav-tabs tabArea" data-tabs="tabs">
                        <li class='active'><a href="#" class="top-tab">All</a></li>
                        <li><a href="#" class="top-tab">Active</a></li>
                        <li><a href="#" class="top-tab">Inactive</a></li>
                        <li><a href="#" class="top-tab">Follow-up</a></li>
                        <li><a href="#" class="top-tab">Sold</a></li>
                        <li><a href="#" class="top-tab">Dead</a></li>
                        <li><a href="#" class="top-tab">Applications (1233)</a></li>
                    </ul>
                </div>
            </td>
        </tr>
        <thead>
            <tr style="background-color:#DFE8EB;">
                <td style="width:5em;font-weight:bold;">Date</td>
                <td style="width:5em;font-weight:bold;">Appt</td>
                <td style="font-weight:bold;">First</td>
                <td style="font-weight:bold;">Last</td>
                <td style="font-weight:bold;">Campaign</td>
                <td style="width:5em;font-weight:bold;">Phone</td>
                <td style="font-weight:bold;">City</td>
                <td style="width:4em;font-weight:bold;">Status</td>
                <td style="width:9em; font-weight:bold;">Actions</td>
                <td style="width:1.5em;"><center><span class="fakelink" onclick="checkedAll()">&plusmn;</span></center></td>
            </tr>
        </thead>
        <?php echo $RESULTSTBL; //echo data rows ?>
    </table> 
</div>

And the my latest attempt using FreezeHeader.js looks like this:

$('table.table').freezeHeader();
Improve this question
7
  • May i ask why dont you use datatables ? i know its unrelated to your question but it would help alot Commented Apr 2, 2014 at 17:05
  • I just haven't had a reason to. My table looks fine with the standard bootstrap classes. Would that solve my problem? Commented Apr 2, 2014 at 17:10
  • well, you can use dataTables, and use their plugins to do pretty much everything you want including fixed header .. sorting .etc And you can keep you're styling Commented Apr 2, 2014 at 17:11
  • @Adelphia Yeah - I managed to reproduce the problem - will wook into it a bit later if you still don't solve it - got something to finish first. Commented Apr 2, 2014 at 18:10
  • Thank you @easwee I would appreciate that :) Commented Apr 2, 2014 at 18:19

1 Answer 1

Reset to default
1

I've looked into it and the problem is that freezeHeader creates a new dummy overlay div above the top of your table and makes a copy of your table header inside that same table.

Until the table header was inside your main table, it got it's width calculated based on other cells in the table .

Once you take it out, the table will try to accomodate the cell width to the content of the cell. Since now the header is isolated in a new table, it now get's the width from the only cell content that it has - the column names of the table header. Some of those columns don't have a set width - on some you did set the width. If you want to keep it the same width, you will have to set a fixed width to atleast 9 cells out of 10 (if you want to keep it 100% fluid) or give fixed width to all - table and cells.

Sample here (cells width set in % - the total minimum width of the table has to be wider than the sum of the widths set on cells + the content of the fluid cell without width): http://jsbin.com/racinone/2/

    <tr style="background-color:#DFE8EB;">
        <td style="width:90px;font-weight:bold;">Date</td>
        <td style="width:60px;font-weight:bold;">Appt</td>
        <td style="width:100px;font-weight:bold;">First</td>
        <td style="width:100px;font-weight:bold;">Last</td>
        <td style="font-weight:bold;">Campaign</td> <!-- fluid cell - can be only one -->
        <td style="width:100px;font-weight:bold;">Phone</td>
        <td style="width:100px;font-weight:bold;">City</td>
        <td style="width:100px;font-weight:bold;">Status</td>
        <td style="width:100px;font-weight:bold;">Actions</td>
        <td style="width:100px;"><center><span class="fakelink" onclick="checkedAll()">&plusmn;</span></center></td>
    </tr>

Note: Also keep in mind that if you are planning to have this table fluid and not break it, if you resize the table to a smaller width, you need to keep the cell width larger than the content within it (or use word wrap) else it will still fail to calculate the appropriate width.

--

You may also want to look at some other css approaches to achieve this: Pure CSS Scrollable Table with Fixed Header

--

Another approach I could imagine, is to write the cell widths of the first row in the original table into a javascript array and after you call the plugin, you also do a callback and iterate over the array and set the cell widths in the new array (this would probably be the most flexible approach).

The behaviour of the plugin already works in a "hacky" way, so this are kinda the only options I see. Hope I gave you any good ideas.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.