我有两个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;
}