How to fix table overflow to have it automatically scroll?

Question

I have the code to allow my table to scroll when a certain height is reached. However, when I implement the code it does not change anything in the actual table. I have a attribute that changes the width, which works. Though the height and scroll attribute does not. I am not sure why it is not working.

.tableScroll {
      width: 50em;
      height: 10px;
      overflow: scroll;
    }

    <div class="col-md-9 right-pane">
            <div class="row">
               <!--<div class="col col-md-12"> tyler mark --> 
                  <h6>General Information</h6>
                    <span class="label">*Tier:</span>
                    <div class="col col-lg-12 search-bar">
                      <select class="select" data-placeholder="Select...">
                        <option value="AL">Alabama</option>                             
                        <option value="WV">West Virginia</option>
                        <option value="WI">Wisconsin</option>
                        <option value="WY">Wyoming</option> 
                      </select>
                    </div>
                                       
                    <span class="label">Type:</span>                                  
                    <div class="col col-lg-12 search-bar">
                      <select class="select" data-placeholder="Select...">
                        <option value="AL">Alabama</option>                             
                        <option value="WV">West Virginia</option>
                        <option value="WI">Wisconsin</option>
                        <option value="WY">Wyoming</option> 
                      </select>
                    </div>
    
                    <span class="label">Name:</span>   
                    <div class="col col-lg-12 search-bar">
                        <input class="form-control form-control-sm" type="text">
                    </div>
    
    
                    <div class="col col-lg-12 search-bar">
                      <select class="select" data-placeholder="Select...">
                        <option value="AL">Alabama</option>                             
                        <option value="WV">West Virginia</option>
                        <option value="WI">Wisconsin</option>
                        <option value="WY">Wyoming</option> 
                      </select>
                    </div>
    
                    <div class="col col-lg-12 search-bar text-right">
                      <button class=" btn btn-primary btn-sm"> Select</button>
                    </div>
    
    
                    
                      <div class="col col-md-12">      
                          <br>
                          <br> 
                          <h6>Deployment Components:</h6>  
                          <div class="table-responsive-sm">            
                          <table class="table table-sm table-hover tableScroll">                           
                            <tbody id="mytab">
                              <tr>
                                <td>C://IIS</td>                                
                              </tr>
                              <tr>                                 
                                <td>C://SQL</td>
                              </tr>
                              <tr>
                                <td>C://Windows File Share</td>                         
                              </tr>
                              <tr>
                                <td>C://Etc</td>
                              </tr>
                              <tr>
                                <td>C://IIS</td>                                
                              </tr>
                              <tr>                                 
                                <td>C://SQL</td>
                              </tr>
                              <tr>
                                <td>C://Windows File Share</td>                         
                              </tr>
                              <tr>
                                <td>C://Etc</td>
                              </tr>
                              <tr>
                                <td>C://IIS</td>                                
                              </tr>
                              <tr>                                 
                                <td>C://SQL</td>
                              </tr>
                              <tr>
                                <td>C://Windows File Share</td>                         
                              </tr>
                              <tr>
                                <td>C://Etc</td>
                              </tr>
                              <tr>
                                <td>C://IIS</td>                                
                              </tr>
                              <tr>                                 
                                <td>C://SQL</td>
                              </tr>
                              <tr>
                                <td>C://Windows File Share</td>                         
                              </tr>
                              <tr>
                                <td>C://Etc</td>
                              </tr>    
                            </tbody>
                        </table>
                        </div>
                      
                          <br>
                      </div>
      <!--</div> tyler mark-->        
            </div>
    
            
          
            <div class="row">
                <div class="col col-md-12">      
                    <br>
                    <br> 
                    <h6>Selection Preview</h6>                        
                    <span class="label">Query</span>
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3">SELECT * FROM WebService WHERE EXISTS (module.fileName ends-with '/1AS')</textarea>
                    <br>
                </div>
            </div>                      
          </div>

Well in that case you need to apply those properties to .table-responsive-sm not .tableScroll or move this class with .table-responsive-sm Post the answer below @MeghnaBhuptani — Awais
– Awais, Commented Dec 2, 2019 at 13:15

pegah · Accepted Answer · 2019-12-02 13:19:48Z

1

you need to add specific height and overflow:auto; to div that wrap your table. for example:

.table-responsive-sm {
   max-height: 100px;
   overflow: auto;
}

I suggest you add a class to this div, and style with this specific class.

answered Dec 2, 2019 at 13:19

pegah

1661 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Awais · Accepted Answer · 2019-12-02 13:22:44Z

.tableScroll {
      width: 20em;
      height: 200px;
      overflow: auto;
    }

<div class="col-md-9 right-pane">
            <div class="row">
               <!--<div class="col col-md-12"> tyler mark --> 
                  <h6>General Information</h6>
                    <span class="label">*Tier:</span>
                    <div class="col col-lg-12 search-bar">
                      <select class="select" data-placeholder="Select...">
                        <option value="AL">Alabama</option>                             
                        <option value="WV">West Virginia</option>
                        <option value="WI">Wisconsin</option>
                        <option value="WY">Wyoming</option> 
                      </select>
                    </div>

                    <span class="label">Type:</span>                                  
                    <div class="col col-lg-12 search-bar">
                      <select class="select" data-placeholder="Select...">
                        <option value="AL">Alabama</option>                             
                        <option value="WV">West Virginia</option>
                        <option value="WI">Wisconsin</option>
                        <option value="WY">Wyoming</option> 
                      </select>
                    </div>

                    <span class="label">Name:</span>   
                    <div class="col col-lg-12 search-bar">
                        <input class="form-control form-control-sm" type="text">
                    </div>


                    <div class="col col-lg-12 search-bar">
                      <select class="select" data-placeholder="Select...">
                        <option value="AL">Alabama</option>                             
                        <option value="WV">West Virginia</option>
                        <option value="WI">Wisconsin</option>
                        <option value="WY">Wyoming</option> 
                      </select>
                    </div>

                    <div class="col col-lg-12 search-bar text-right">
                      <button class=" btn btn-primary btn-sm"> Select</button>
                    </div>



                      <div class="col col-md-12">      
                          <br>
                          <br> 
                          <h6>Deployment Components:</h6>  
                          <div class="table-responsive-sm tableScroll">            
                          <table class="table table-sm table-hover ">                           
                            <tbody id="mytab">
                              <tr>
                                <td>C://IIS</td>                                
                              </tr>
                              <tr>                                 
                                <td>C://SQL</td>
                              </tr>
                              <tr>
                                <td>C://Windows File Share</td>                         
                              </tr>
                              <tr>
                                <td>C://Etc</td>
                              </tr>
                              <tr>
                                <td>C://IIS</td>                                
                              </tr>
                              <tr>                                 
                                <td>C://SQL</td>
                              </tr>
                              <tr>
                                <td>C://Windows File Share</td>                         
                              </tr>
                              <tr>
                                <td>C://Etc</td>
                              </tr>
                              <tr>
                                <td>C://IIS</td>                                
                              </tr>
                              <tr>                                 
                                <td>C://SQL</td>
                              </tr>
                              <tr>
                                <td>C://Windows File Share</td>                         
                              </tr>
                              <tr>
                                <td>C://Etc</td>
                              </tr>
                              <tr>
                                <td>C://IIS</td>                                
                              </tr>
                              <tr>                                 
                                <td>C://SQL</td>
                              </tr>
                              <tr>
                                <td>C://Windows File Share</td>                         
                              </tr>
                              <tr>
                                <td>C://Etc</td>
                              </tr>    
                            </tbody>
                        </table>
                        </div>

                          <br>
                      </div>
      <!--</div> tyler mark-->        
            </div>



            <div class="row">
                <div class="col col-md-12">      
                    <br>
                    <br> 
                    <h6>Selection Preview</h6>                        
                    <span class="label">Query</span>
                    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3">SELECT * FROM WebService WHERE EXISTS (module.fileName ends-with '/1AS')</textarea>
                    <br>
                </div>
            </div>                      
          </div>

TRY This

Collectives™ on Stack Overflow

How to fix table overflow to have it automatically scroll?

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