html - border-bottom in panel-heading not displaying full width when window shrink -
how make border-bottom of panel-heading display full width when window shrink , horizontal axis appear below panel-body? border displayed when window maximized, display width same window when window shrink. here code:
<section class="panel"> <header class="panel-heading" style="display:block;"></header> <div class="panel-body"> <table class="table table-hover table-bordered"></table> </div> </section> .panel-heading { padding: 10px 20px; color: #535351; font-size: 14px; font-weight: bold; min-height: 52px; border-bottom: 1px solid #e5e5e5; border-top-right-radius: 3px; border-top-left-radius: 3px; } .panel-body { padding: 15px 20px 15px 20px; border-bottom: 1px solid #e5e5e5; display: inline-block; } .table { width: 100%; margin-bottom: 20px; min-width: 1130px; max-width: 100%; background-color: transparent; border-collapse: collapse; border-spacing: 0; display: table; }
thanks,
<section class="panel"> <header class="panel-heading" style="display:block;"></header> </section> <section class="panel"> <div class="panel-body"> <table class="table table-hover table-bordered"></table> </div> </section>
this code solved problem. separate heading new section.
Comments
Post a Comment