当窗口大小减小时，停止填充从减少

Question

我有两个div。 内部div包含一个表格。

当浏览器最大化时，左右两侧有相等的填充。 当窗口大小减小时，在一个点之后，右边的填充开始减小，并且出现表格的水平滚动条。所以当有一个滚动条时，表和右侧的div之间没有空格。

有人能让我知道如何阻止正确的填充减少吗？

   

 .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>

解决方案：

将填充更改为边距并且有效。

.panel-body{
 margin:15px;
 }