Scrolling child div within a parent div

Question

Some background

I am using Gridster widgets for webpage.These widgets are displayed below an HTML table.The table helps in identifying some information for each widget.The widgets are html <li> elements placed in <ul> .

The widgets are generated dynamically from a json.(So they are not fixed in number)

My desired output

Since the widgets are dynamically generated there can be too many widgets.When this happens the webpage becomes too big and user cant see the HTML table.

So what I want is that the part in which widgets are there should scroll, the HTML table being fixed at its position

Due to which even when user wants to see the widgets which are at bottom he can see the HTML table with it

What I have tried so far

I made a <div> to the part in which widgets are there and gave the property overflow:scroll to them.But even then its not working in the way I am expecting

My HTML

<div class="content-wrapper">
    <div class="row">
      <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">My Webpage</h4>
           <p class="card-description" style="color:black;">
                      Zone for Gasoline:A, Year :2018
            </p>
            <div class="row">
             <div class="col-md-12">
              <div class="btn-group btn-block mb-4" aria-label="steps">
                     <div class="col md-4">
                        <a href="/app/step-1/"> <button type="button" class="btn btn-block btn-outline-secondary"> Step 1 </button> </a>
                         </div>
                <div class="col md-4">
                        <a href="/app/step-2/"> <button type="button"  class="btn btn-block btn-outline-secondary" > Step 2  </button> </a>
                      </div>
                 <div class="col md-4">
                        <a href="/app/step-3/"> <button type="button" class="btn btn-block btn-primary"> Step 3 </button></a>
                </div>
               </div>
              </div>
            </div>


  <table border = "1" class=".table-responsive">
     <tr>
        <th colspan="4"  style="background-color:#eedd82;">Zone 1</th>
        <th colspan="4"  style="background-color:#eedd82;">Zone 2</th>
        <th colspan="4"  style="background-color:#eedd82;">>Zone 3</th>
     </tr>
     <tr>
        <td width="400" align="center" style="background-color:#0085ca">T1</td>
        <td width="400" align="center" style="background-color:#0085ca">T2</td>
        <td width="400" align="center" style="background-color:#0085ca">T3</td>
        <td width="400" align="center" style="background-color:#0085ca">T4</td>
        <td width="400" align="center" style="background-color:#0085ca">T1</td>
        <td width="400" align="center" style="background-color:#0085ca">T2</td>
        <td width="400" align="center" style="background-color:#0085ca">T3</td>
        <td width="400" align="center" style="background-color:#0085ca">T4</td>
        <td width="400" align="center" style="background-color:#0085ca">T1</td>
        <td width="400" align="center" style="background-color:#0085ca">T2</td>
        <td width="400" align="center" style="background-color:#0085ca">T3</td>
        <td width="400" align="center" style="background-color:#0085ca">T4</td>
     </tr>
 </table>

 <!--Gridster widgets will appear here below table-->
 <div class="gridster father">
      <ul class="child">

      </ul>
</div>

I am sorry for so big HTML code.In HTML you can see that below <table> I have given a class father to the <div> and child to <ul> element.

For both of them I tried the following CSS(individually and in combined way)

.father{
    overflow:scroll;
  }

.child{
    overflow:scroll;
  }

But I was not giving the "scrolling" effect which I wanted

Fiddle representing the same

Any help will be really appreciated

Answer 1

Assuming you wish to apply scrolling to enable responsive behaviour on smaller displays such as mobile phone, overflow scroll should be applied to a parent of the table to enable scrolling like so

HTML:

<div class="parent">
    <ul class="child">
        ...
    </ul>
</div>

CSS:

.parent {
    overflow: scroll;
}

For a better responsive experience we probably only want this scrolling to be left to right (y-axis) and not top to bottom (x-axis) we need to set this as well and so therefore need to adjust our CSS accordingly.

.parent {
    overflow-y: scroll;
}

In your example it looks like the father and child classes are being applied to the grid build as an unordered list ( <ul> ) with the little car icons in. This <ul> is defining the height and with of the the parent, so therefore in a large enough window the table would not be expected to scroll. If you compress the window however the parent element only expands to the width of the window which is expected behaviour of a div. At this point the child element does scroll.

If you wish to apply this same behaviour to the .table-responsive element you need to apply the same principle. Wrap the table in a parent and apply the overflow accordingly. You do not want to put overflow-scroll on the table itself, but you may wish to give the table a min-width or apply a fixed width such as width: 300px;

HTML:

<div class="parent">
    <table class="table-responsive">
        ...
    </table>
</div>

CSS:

.parent {
    overflow-y: scroll;
}
.table-responsive {
    your styles
}

If you need to fix the dimensions of the parent so that the element does not define the size of the window you could do something like so with your CSS

.parent {
    overflow: scroll;
    width: 400px;
    max-width: 100vw;
    height: 400px;
    max-height: 100vh;
}
.table-responsive {
    your styles
}

In this case your width will ideally be 400px wide, but never exceed the viewport width and never be more that 400px high, but never exceed the viewport height. If you want to get even cleverer with your height you could use calc for you max height so the that window never exceeds a specific height taking into consideration other elements on the page.

Answer 2

Responsive Tables are not written like that. It's like this :

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>