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*/ } 

codepen sample of code


Comments

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -