相对于子div水平滚动滚动父div

Question

I have following HTML code:

<div style="height: auto; width: 400px; overflow: hidden;" id= "parent">
   //dynamic content which makes width of the parent to overflow
   <div style= "height: 200; width: 400px; overflow: auto;" id= "child">
   // dynamic content which makes width of the child div to overflow horizontally and vertically
   </div>
</div>

Is there any way, I can scroll the parent div Horizontally while I am scrolling the child div? Actually, I am trying to freeze the headings(the content of the parent div) and want a scroll for the data (Content of the child div). Any help would be deeply appreciated.

Thanks

Answer 1

There is a CSS white-space:nowrap attribute that may work.

An issue you may be running into is that most HTML text will line wrap by default. You may have to use the <pre> or <code> tags to get the horizontal scrolling inside the parent div without line breaks if that is what you are looking for.

Or to get the freeze pane effect your comment says you are looking for, just use a separate div for the header and content panes.

<div id="container">
    <div id="header"></div>
    <div id="info"></div>
</div>