Bootstrap Panel-body With Table Inside

I have a bootstrap panel that collapses it self closed on click of an icon. This panel contains a table inside that is full width but only looks this way when there is no panel-bod

Solution 1:

Try adding the following styles in your custom css:

.table > thead > tr > th{
    border-right: 1px solid #ddd;
    border-bottom:0;
}

.table > tbody > tr > td{
    border-right: 1px solid #ddd;
}

.table > thead > tr > th:last-of-type {
    border-right: 0px;
}

.table > tbody > tr > td:last-of-type {
    border-right: 0px;
}

.panel-body {
    padding: 0;
}

.panel-body > .table{margin-bottom:0px;}

Fiddler:http://jsfiddle.net/z0y0hp8o/6/

I hope the above solution will work for you.

Solution 2:

There's a default stylesheet added by bootstrap for the panel body:

.panel-body {
    padding: 15px;
}

So add your own css to replace the above with:

.panel-body {
    padding: 0;
}

Solution 3:

if you dont want to remove the padding from every panel-body, ad an ID and remove the padding from it.

<divclass="panel panel-default"><divclass="panel-heading">Title Here</div><divid="tablePanelBody"class="panel-body"><tableclass="table table-bordered table-hover specialCollapse"><tr><td>Hello World!</td></tr></table></div></div></div>

and then:

#tablePanelBody {
    padding: 0;
}

http://jsfiddle.net/jrnwfgp7/

Solution 4:

Try replacing the div with another table element, ugly solution but it works.

<table class="panel-body specialCollapse">
 <table class="table table-bordered table-hover goup">
  ...content
 </table>
</table>