1

Here is what my code looks like:

enter image description here

The JSFiddle code is here. The problem is in the css using display: block

tbody.scrollContent 
{
     **display: block;**

height: 262px;
overflow: auto;
width: 756px;
}

but i need to use this to get the scroll bar as shown. But when i resize the headers by left clicking the vertical bar on the header and then scrolling left or right the thead and tbody doesnt match. If i remove the display: block then everything works correctly but i lose my vertical scroll bar. Im using jquery ui resizable plugin to try and resolve the issue and they when i do a console.log on both the thead cell and the tbody cell are the same. Ive read some other post but cant seem to really get it to work with mine. Any help would be appreciated.

Update - 1/31/2014
My final solution was to take my code and just split the thead and tbody into two different tables. What i did was create two tables. The first one is just the thead and the second one is tbody. That way i can still keep the functionality with the scroll bar only on the tbody. And just made the thead width 16px longer so it expands over the scrollbar. I did this because of the problem with table-layout: fixed and breaking the thead and tbody alignment. Thanks for the help others have pointed out.

adviner
  • 3,295
  • 10
  • 35
  • 64

1 Answers1

0

Here is one possible solution that might work for you:

CSS: EXAMPLE FIDDLE

  tbody.scrollContent {
  //display: block; <- remove this entry

    height: 262px;
    overflow: auto;
    width: 756px;
  }

  div.scrollContainer {
    // existing styles
    overflow-y: scroll; //<-add this
    overflow-x: hidden; //<- and this
   }
badAdviceGuy
  • 2,060
  • 1
  • 16
  • 12
  • I've tried that also. The only problem is the header disappears as I scroll and thanks for the advise – adviner Jan 31 '14 at 05:10
  • See this post about a similar situation [http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody](http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody) – badAdviceGuy Jan 31 '14 at 23:10