css overflow scroll table cell with width:auto or width:100%

Question

I would like to build flexible layout with scrollbars and dynamic widths.

I have table width,height 100% of window and 2(3) columns with auto widths ( widths depends on it's content ) and center column with remaining width. I can't specify exact width of column.

I would like to have Horizontal and Vertical Scrollbars if my content bigger than cell width and height;

Example 1

Example 2 Here is LiveDemo

<div style="width:1024px">
    <table style="width:100%">
    <tr>
       <td>
           <div>Column Menu with Dynamic Content and width</div>
       </td>
       <td style="width:100%;">
           <div style="overflow:scroll;">Column Big Dynamic Content with ScrollBars</div>           
       </td>
    </tr>
   </table>
</div>

I can't use :

table-layout:fixed - because columns width depends on it's content
overflow:scroll with width,height specified
i need pure css solution

I've tried :

width:100%, max-width:100%, min-width:100% - not working
white-space:wrap works only if content is text, and there is only vertical scrollbar

Question is : How to make div with overflow:scroll or overflow:auto have width,height of it's parent container ( in my case it is TD )

p.s BEST case would be if it was <TD style="overflow:auto"></TD> and width is auto.

if the columns width depends on the content then how will it know when to scroll? Also how can you have 2 columns but one of them is 100%. Also is this tabular data? If not, I would use display:flex and divs, would be much easier to achieve what you want — Pete
– Pete, Commented Oct 20, 2016 at 11:21
If you run example, you will see if table columns has auto width, it width will be calculated from width of content. It;s for first column, for second column width will be remaining of total width of table — Tim TJey Jun
– Tim TJey Jun, Commented Oct 20, 2016 at 11:45
Ok, run your example and take off that 200px, you see the first column shrinks rather than grows, the only way that will grow with the 100% being on the other column is if it is an image or if you have white-space nowrap; — Pete
– Pete, Commented Oct 20, 2016 at 11:49

Tim TJey Jun · Accepted Answer · 2016-10-20 17:39:52Z

Found second solution ( more prettier ), and it works!

Here on stackoverflow there are solutions saying add child div to td with height,width, and overflow scroll, but they all not working with dynamic widths of cells, so I slightly modified solution by adding to div position:absolute and set top,bottom,right,left to 0, and adding to parent container position:relative;

Here is Live Demo 1

    <table border="1" width="100%" height="100%">
      <tr>
        <td> <!-- left column with autowidth -->
            <div style="width:200px">Left Menu</div>
        </td>
        <td style="width:100%; position:relative;"> <!-- fill remaing width of columns -->
          <div style="position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto; ">
            <div style="width:1000px; height:1000px; background:#f05555;">Calendar Mega BIG content</div>
          </div>
        </td>
         <td> <!-- right column with autowidth -->
            <div style="width:300px">Right Menu</div>
        </td>
        </tr>
    </table>

If we go further and be more modern ( in life without tables ), it would be like this :

Here is Live Demo 2

    <ul style="width:100%; height:100%; display:table;">
        <li style="display:table-cell;"> <!-- left column with autowidth -->
            <div style="width:200px">Left Menu</div>
        </li>
        <li style="display:table-cell; width:100%; position:relative;"> <!-- fill remaing width of columns -->
          <div style="position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto;">
            <div style="width:1000px; height:1000px; background:#f05555;">Calendar Mega BIG content</div>
          </div>
        </li>
         <li style="display:table-cell;"> <!-- right column with autowidth -->
            <div style="width:300px">Right Menu</div>
        </li>
    </ul>

Tim TJey Jun · Accepted Answer · 2016-10-20 17:05:18Z

Found ( Ugly ) solution, but it works!

Basic idea, is to wrap scrollable content inside one more table with table-layout:fixed, leaving outer table with dynamic widths :)

Here is Live Demo

  <table border="1" width="100%" height="100%">
    <tr>
      <td>
          <div style="width:200px">Left Menu</div>
      </td>
      <td style="width: 100%;">
          <table style="table-layout: fixed; width: 100%; height: 100%;">
          <tr><td>
              <div style="overflow:auto; width:100%; height:100%;">
                <div style="width:1000px; height:1000px; background:#f0f0f0;">Calendar</div>
              </div>
            </td>
          </tr>
          </table>
      </td>
       <td>
          <div style="width:300px">Right Menu</div>
      </td>
      </tr>
  </table>

If you find better solution, without much markup tags, please welcome to post here...!

p.s I think i should try play with display:table or flex to achieve more elegant solution

Collectives™ on Stack Overflow

css overflow scroll table cell with width:auto or width:100%

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related