• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 373
  • Last Modified:

Fixed table header

Looking for a solution that gives a fixed table header and scrollable body content.  But two of the 5 columns need to be dynamically sized depending on the screen width i.e. they equally take up the rest of the table width (which needs to be 100%)
All solutions I've found work on set column widths. Also the content of the cells needs to be snipped if too long i.e. no line wrap - currently using ellipses for this and js to get the screen width so I can set the col width on the 2 columns but this causes a problem when the browser is resized.  Is there a solution?
0
Gary
Asked:
Gary
  • 4
  • 2
2 Solutions
 
fritz_the_blankCommented:
How about a scrollable div tag?

FtB
0
 
GaryAuthor Commented:
Any solution, as long as the columns line up and the table resizes
0
 
fritz_the_blankCommented:
Here are a couple of links that describe them in case this might work for you:

http://www.domedia.org/oveklykken/css-div-scroll.php
http://forums.devarticles.com/archive/t-8367

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
GaryAuthor Commented:
Not seeing how they help Fritz
0
 
fritz_the_blankCommented:
I was thinking that you could put the header row above the div and the rest of your rows in the scrolling div tag. That way, you would have the fixed header with the remainder of the page scrolling as you requested.

FtB
0
 
chisholmdCommented:
I think you shouldbe able to use Fritz's scrollable div solution like this.

Make a table just for the colheads using % for widths

<table width="80%">
   <tr><td width="50%">col1</td><td width="50%">col2</td>
</table>
<div [scrolling div style + width 80%]>
 <table width="100%">
     <tr><td width="50%"></td><td width="50%"></td></tr>
       ....
</table>
</div>

I think that should work, I'll try it out myself later tonight.  If things don't line up I'd first try defeating any built in TAG padding's, margin's etc by setting them to 0 in the CSS.  (really helped allot when I figured out that some HTML elements have defaults for these things)






0
 
fritz_the_blankCommented:
I think that I got this one here:  ID: 12635122

or a split with chisholmd for stating my idea explicitly.

FtB
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now