1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Fixed table header

Discussion in 'HTML & Website Design' started by georgewr3, Dec 5, 2013.

  1. #1
    How can I fix a table header that has multiple sortable rows? (See attachment) Currently the light blue area with the drop downs is fixed and the gray header with double rows and the colored rows beneath it scroll. I want the colored rows to scroll but the header remain fixed. When I try to use position: fixed, the header jumps over to the left and re-sized randomly. Since the scroll bar's top edge should be flush with the bottom of the header, I don't want the header to expand to take up the space on the right otherwise the headers column's won't link up with the colored row columns. I tried so many variations but can't seem to figure out what is needed.
     

    Attached Files:

    georgewr3, Dec 5, 2013 IP
  2. adultwordpressthemes

    adultwordpressthemes Active Member

    Messages:
    102
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    83
    #2
    Why not put the header in a seperate table, so the scrolling doesnt affect it?
     
    adultwordpressthemes, Feb 3, 2014 IP
  3. RadarPro

    RadarPro Well-Known Member

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    111
    #3
    Just use one of this examples.
    http://www.cssbakery.com/2010/12/css-scrolling-tables-with-fixed.html
     
    RadarPro, Feb 3, 2014 IP
  4. Code Developer

    Code Developer Active Member

    Messages:
    48
    Likes Received:
    2
    Best Answers:
    2
    Trophy Points:
    58
    #4
    You can use : http://datatables.net Its a stable solution.
     
    Code Developer, Feb 4, 2014 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Doesn't even look like tabular data -- looks like a FORM, so put the form BEFORE the table, NOT in it!

    Wait... do you mean what should be a THEAD row of TH? If so, tables aren't designed to do what you are asking... though if you are showing enough rows that there's a need to try and fix that THEAD, (you are using a THEAD, right?!? TH with scope="col"?) you should probably add pagination and show less rows at once... though that's the case any time you would put a scrollbar on the table instead of the page.

    You MIGHT be able to pad the top of a DIV around the table, then aPo the THEAD, but I'm not sure that would work reliably cross-browser.
     
    deathshadow, Feb 4, 2014 IP