html - panel-body not displaying full width when display set to inline-block -
is possible make panel-body div adjust screen resolution when 'display' set 'inline-block'? panel-body div displayed full width when 'display' set 'block', can cause other problems.
html code:
<div class="panel-body"> <table class="table table-hover table-bordered"> </table> </div>
css code:
.panel-body { padding: 15px 20px 15px 20px; border-bottom: 1px solid #e5e5e5; display: inline-block; } .table { width: 100%; margin-bottom: 20px; }
notice if set 'min-width:1100px;' table css, table width fixed, not able adjust screen resolution.
try out
.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*/ }
Comments
Post a Comment