1

Looking for some idea on how to create a CSS/Javascript Table that has fixed Vertical header. The need is to have two of the columns to be fixed.

I have created a sample, but this is using two separate tables. http://jsfiddle.net/X5cKj/

CSS for jsfiddle

table,th,td
{
    border:1px solid black;
    border-collapse:collapse;
    table-layout:fixed;
}

td{
    width: 75px;
    padding: 0px 20px;
    height: 30px;
}
#mainContainer{
    width: 100%;
}
#leftContainer{
    width: 228px;
    display: inline-block;
}
#rightContainer{
    width: 300px;
    display: inline-block;
    overflow: auto;
}

Thanks for looking.

user2532865
  • 119
  • 1
  • 10
  • 1
    One of [these](http://stackoverflow.com/search?q=[javascript]fixed+table+header) or [these](http://stackoverflow.com/search?q=[css]fixed+table+header)? – Teemu Apr 07 '14 at 05:14
  • Before ask your question check SO whether the question is already there or not. – Vivek Vikranth Apr 07 '14 at 05:24
  • Looks to be a duplicate of: http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body – EnigmaRM Apr 07 '14 at 05:29
  • Well, I looked for existing solutions before posting, but couldn't find a solution for multiple fixed vertical column. I have corrected my original question, I have mistakenly wrote "horizontal" instead of "vertical". – user2532865 Apr 07 '14 at 06:19

1 Answers1

0

I have done the following changes.Check here

#leftContainer{
   width: 200px;
   float: left;
}
#rightContainer{
    width: 300px;
    overflow: auto;
    float: left;
    border-right: 1px solid black;
    border-left: 0px solid;  

}
chinnu
  • 66
  • 7
  • Thanks for fixing my CSS, but I am looking for a single table approach to have multiple fixed vertical headers. My Example uses 2 separate tables. – user2532865 Apr 07 '14 at 16:29