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.

<div class="panel panel-default">
    <div class="panel-heading">Title Here</div>
        <div id="tablePanelBody" class="panel-body">
            <table class="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>