Table header alignment with tablesorter & pure css scrollable table

Question

I have a table with tablesorter filter/search function. Now I'm trying to add a scroll bar to it and I'm using "Pure CSS Scrollable table" technique. (website) But I cannot get the alignment work...

Here's a demo

I set the width of each column like this:

table#eventlist  td:nth-child(1), table#eventlist th:nth-child(1) { width: 250px; }
table#eventlist  td:nth-child(2), table#eventlist th:nth-child(2) { width: 250px; }
table#eventlist  td:nth-child(3), table#eventlist th:nth-child(3) { width: 200px; }
table#eventlist  td:nth-child(4), table#eventlist th:nth-child(4) { width: 200px; }

(I wanted to use the scroller-wedget that I found on tablesorter website. But it turned out that it doesn't work because it doesn't support the filter formatter settings. )

Answer 1

That's a nice find! I'll have to "fix" up my scroller widget (which I hate) with this method.

Anyway to fix the alignment issue, I have found that all three width settings need to be set, along with box-sizing.

{ width: 250px; min-width: 250px; max-width: 250px; }

I updated your demo and made a few adjustments so that the horizontal scrollbar doesn't show up in Chrome. I'm not sure how to style the white box above the scrollbar, yet...

#tableContainer * {
    box-sizing: border-box;
}
/* define height and width of scrollable area. Add 16px to width for scrollbar */
div.tableContainer {
    clear: both;
    height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 916px
}

/* Reset overflow value to hidden for all non-IE browsers. */
/* define width of table. Add 16px to width for scrollbar. */
html>body div.tableContainer {
    overflow: hidden;
    width: 916px
}

/* define width of table. IE browsers only */
div.tableContainer table {
    float: left;
    width: 900px;
}

/* All other non-IE browsers. */
html>body div.tableContainer table {
    width: 916px;
}

/* set table header to a fixed position. WinIE 6.x only
 In WinIE 6.x, any element with a position property set to relative and is a child
 of an element that has an overflow property set, the relative value translates
 into fixed.
 Ex: parent element DIV with a class of tableContainer has an overflow property
 set to auto

 thead.fixedHeader tr { position: relative }

 set THEAD element to have block level attributes. All other non-IE browsers this
 enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */

html>body thead.fixedHeader tr {
    display: block
}

/* define the table content to be scrollable                                              
 set TBODY element to have block level attributes. All other non-IE browsers            
 this enables overflow to work on TBODY element. All other non-IE, non-Mozilla
 browsers induced side effect is that child TDs no longer accept
 width: auto */
html>body tbody.scrollContent {
    display: block;
    height: 262px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%
}

/* define width of TH elements: 1st, 2nd, and 3rd respectively.      
 Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
table#eventlist td:nth-child(1),
table#eventlist th:nth-child(1),
table#eventlist td:nth-child(2),
table#eventlist th:nth-child(2) {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
}

table#eventlist td:nth-child(3),
table#eventlist th:nth-child(3),
table#eventlist td:nth-child(4),
table#eventlist th:nth-child(4) {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
}