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?
LVL 58
GaryAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.