0

I have a long table that has a width of 140%. The header I've added only stretches across the window but does not cover the last few items on the right-hand side of the table. If I (horizontal) scroll to the right, the header does not scroll with the page. I'm sure this can be done but I'm not sure how. 

   if ($va == '1') { echo '<div class="myFloatBar" align="center"><strong>Viewing Location</strong></div>'; }

and here's the CSS:

.myFloatBar{
   bottom:0;
   left:0;
   width:100%;
   position:fixed;
   background-color:#0099ff;
   color: #FFFFFF;
   height: 20px;
   font-size: 15px;
   }

How do I get the bar to be the width of the table AND scroll horizontally?

Mr_Thomas
  • 857
  • 3
  • 19
  • 39
  • you should give an exemple of your issue. HTML would help to know where to fix this. position:fixed refers to windows. – G-Cyrillus Aug 11 '14 at 18:49
  • Seems like you are looking for solution through jquery OR Javascript. find the width of the table and set the width of the bar accordingly. – Raab Aug 11 '14 at 18:51
  • I know my table is set for 140% as the width. Does that help? – Mr_Thomas Aug 11 '14 at 18:54
  • 1
    @Mr_Thomas Difficult to say what the problem is without the HTML for your table, too. Because the code you've given us so far works fine: http://jsfiddle.net/Lo7b1pzq/ – TylerH Aug 11 '14 at 18:57
  • Using your example, I want the text of 'Viewing Location' to move to the left when I move the scrollbar to the right. – Mr_Thomas Aug 11 '14 at 19:00

1 Answers1

0

The reason the "Viewing Location" text does not move to the left when you move the scrollbar to the right is because of position: fixed;. If you remove this, the element will be given the default static position and will move as you expect.

And if you know the width of the table is 140%, why not change the width of the header to 140%?

Example: http://jsfiddle.net/kmoe/fLyhkemv/

kmoe
  • 1,963
  • 2
  • 15
  • 27
  • Yes, it scrolls horizontally just right. But now, when I scroll down, the header stays at the top -- which would be fine but it doesn't follow the page. Is this beyond CSS? – Mr_Thomas Aug 11 '14 at 19:13
  • Ah, I see what you mean - you want it `fixed` in one dimension only... According to this question, it may be beyond CSS: http://stackoverflow.com/questions/3303173/position-element-fixed-vertically-absolute-horizontally – kmoe Aug 11 '14 at 19:17