1

I have two div. Inner div contains a table.

When the browser is maximized there is an equal padding on left and right. When the window size is decreased, after one point, right padding starts decreasing and horizontal scroll bar for the table appears. So when there is a scroll bar there is no space between table and the div on right side.

Could someone let me know how to stop the right padding from decreasing?

   

 .col-lg-12{
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;   
    }

    .panel {
      margin-bottom: 20px;
      background-color: #fff;
      border: 1px solid transparent;
      border-radius: 4px;
      -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
      box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    }

    .panel-body {
      padding: 15px;
    }

    .table {
      width: 100%;
      max-width: 100%;
      margin-bottom: 20px;
    }

    .table-scroll {
      max-height: 300px;
      overflow-y: auto;
    }
    <div class="col-lg-12">
    <div class="panel panel-default">
      <div class="panel-body table-scroll" style="max-height: 600px;">
        <table class="table table-bordered table-hover table-striped table-scroll">
          <thead>
            <tr>
              <th>column1</th>
              <th>column2</th>
              <th>column3</th>

            </tr>
          </thead>
        </table>
      </div>
    </div>
    </div>

Solution :

Changed padding to margin and it worked.

.panel-body{
 margin:15px;
 }
Mukund S
  • 95
  • 2
  • 2
  • 8

0 Answers0