CODEWITHSUNDEEP
csstablesortercss-tablesscrollable
yokonanoda
yokonanoda

Reputation: 15

Table header alignment with tablesorter & pure css scrollable table

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. )

Upvotes: 0

Views: 981

Answers (3)

AC__
AC__

Reputation: 51

I was able to resolve similar alignment problems with:

.tablesorter-scroller-header, .tablesorter-scroller-footer {
   width: 100% !important;  /* need this or table and scroller do not align. -ac 11/21/2017 */
}

(Adding here for future searchers looking for clues... )

Upvotes: 0

Mottie
Mottie

Reputation: 86453

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;
}

Upvotes: 1

Scottux
Scottux

Reputation: 1577

Try adding a CSS rule to set everything to box-sizing: border-box, the hack below will fix your alignment but might be overkill:

* {
  box-sizing: border-box;
}

Upvotes: 1

Related Questions