1 Reply Latest reply: Aug 10, 2013 10:37 AM by Nancy O. RSS

    Horizontally scrollable table inside a <div> styled with a percentage width

    synnott Community Member

      Is the following possible with HTML/CSS?

       

      1.) A 'wrapping' div is styled for "width: 95%;" (which allows it to re-size horizontally based on the size of the screen, and the type and orientation of the mobile device) and "overflow: scroll;".

      2.) Contained in this 'wrapping' div is a program-generated search result. The search result is formatted as a table with each column possessing a fixed width defined in pixels. Depending on the search criteria, the search result table may contain a sufficiently small number of columns that it is contained within the wrapping div (style="width: 95%;"), or the number of columns will be large enough that a horizontal scroll bar is required to view the columns that fall beyond the right margin of the wrapping div.

       

      I'm able to produce the desired result when the wrapping div is of a fixed pixel width; however, when the wrapping div is set to a percentage width, the table formats to the size of the wrapping div.