Q:

Collapse the table instead of collapsing the div block by Bootstrap

I'm looking for the way to avoid the div block that wraps the table. Does anyone know how can I apply the behavior of this block to the table? 
<div class="panel panel-primary">
    <div class="panel-heading" role="tab" id="headingTwo">
        <h3 class="panel-title">
            <a role="button" data-toggle="collapse"
             href="#collapseTwo" aria-expanded="true" 
             aria-controls="collapseTwo">Requests</a>
        </h3>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse in" 
     role="tabpanel" aria-labelledby="headingTwo">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Customer</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>12/07/16</td>
                    <td>John Smith</td>
                </tr>           
            </tbody>
        </table>
    </div>
</div>

A:

I've given and id to the databable i.e example. Replace the href="#collapseTwo" to href="#example" to target the datatable. I have also included a piece of jQuery script to remove the class collapse from the dataTable, because If I don't then the datatable got compressed and looks ugly. If you want to check remove the script and see the difference

$("#example").on('shown.bs.collapse', function(){
  $(this).removeClass('collapse');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="panel panel-primary">
    <div class="panel-heading" role="tab" id="headingTwo">
        <h3 class="panel-title">
            <a role="button" data-toggle="collapse" 
             href="#example" aria-expanded="true" 
             aria-controls="collapseTwo">Requests</a>
        </h3>
    </div>
        <table id="example" class="table table-bordered in">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Customer</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>12/07/16</td>
                    <td>John Smith</td>
                </tr>           
            </tbody>
        </table>
    </div>
</div>

