Question

当'display'设置为'inline-block'时，是否可以将panel-body div调整为屏幕分辨率？当'display'设置为'block'时，panel-body div显示全宽，这可能会导致其他问题。

HTML code：

<div class="panel-body">
<table class="table table-hover table-bordered">
</table>
</div>

CSS代码：

.panel-body {
  padding: 15px 20px 15px 20px;
  border-bottom: 1px solid #e5e5e5;
  display: inline-block;
}

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

请注意，如果设置'min-width：1100px;'到表CSS，表宽度是固定的，不能调整到屏幕分辨率。

Answer 1

试试这个

.panel-body {
  padding: 15px 20px 15px 20px;
  border-bottom: 1px solid #e5e5e5;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

.table{
  width: 100%;
  height: 20px;/*Remove this*/
  margin-bottom: 20px;
  background: #ff0;/*Remove this*/
}

CodePen sample of code

Answer 2

尝试使用外部div响应，内部表格有一些宽度......

＆＃13;

.panel-body {
   width: 96%;
  padding: 2%;
  border: 1px solid #e5e5e5;
  overflow-x: auto;
  
}

.table
{
    width: 100%;
    min-width: 1100px;
}

＆＃13;

<div class="panel-body">
<table class="table table-hover table-bordered">
    <tr>
        <td>Sample data</td>
    </tr>
</table>
</div>

＆＃13;

当显示设置为内联块时，panel-body不显示全宽

2 个答案: