Collapse the table instead of collapsing the div block by Bootstrap

Question

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>

Answer 1

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>