1

I have a very similar scenario to the one described in how do I create an HTML table with fixed/frozen left column and scrollable body?. Essentially, that works for me but I need my table to be contained in a div which will be sitted next to another div (so, the scrollable table will have an options panel on the left side). The structure is:

<div id="wrapper">
 <div id="first"></div>
 <div id="second"><table>All table contents here...</table></div>
</div>

Unfortunately the solution proposed in the original question doesn't seem to work when the div is sit next to another, the absolute positioning of the left column will take it all the way left. See a fiddle here http://jsfiddle.net/odiseo/YMvk9/7106/

Community
  • 1
  • 1
odiseo
  • 6,754
  • 2
  • 20
  • 21
  • Btw, I need this as a CSS solution only. I know there are jQuery Plugins for this but I don't want to use jQuery or clone tables, as this is part of an AngularJS application and cloning DOM with Angular is messy. – odiseo Jun 24 '15 at 19:20

1 Answers1

1

Okay so you could do the following: Replace left:0 in .headcol with transform: translatex(-5em); and then add float:left; to #second.

jaunt
  • 4,978
  • 4
  • 33
  • 54
  • I did what you suggested but still I can't get the desired behavior http://jsfiddle.net/odiseo/YMvk9/7146/ I want to have #left and #right sit next to each other. – odiseo Jun 24 '15 at 20:22
  • Sorry what do you mean by #left and #right? #first and #second are next to each other, if that's what you meant. – jaunt Jun 24 '15 at 20:57
  • Yep exactly, sorry. I want to keep #first and #second next to each other (left and right) – odiseo Jun 24 '15 at 21:07
  • They are next to each other aren't they? Or are you talking about that 1px gap that border created? Replace `border` with `outline` in `#second` to get rid of it. – jaunt Jun 24 '15 at 21:11
  • Omg totally they are! I had to resize my screen to make them both fit. I feel like an idiot. Thank you anyways, I appreciate your help. – odiseo Jun 24 '15 at 21:12