Responsive Bootstrap Datatable not collapsing columns at the correct point

Add Div with class "table-responsive" before table start and delete width = "100%" from table tag ,

<div class="panel panel-primary" style="margin: 50px;">
<div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
    <div style="width: 100%; padding-left: -10px; border: 1px solid red;">
    <div class="table-responsive">  <-- add this div
        <table id="example" class="table table-striped table-hover dt-responsive display nowrap" cellspacing="0"> <-- remove width from this
            <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
            </thead>
        </table>
        </div>
    </div>
</div>

For me the problem got fixed when I put the table container div inside a bootstrap row div.

<div class="row">
 <div class="table-responsive">
   ... //table here
 </div>
</div>

The reason for this was that datatables bootstrap version was adding some col-* to toolbar (in my case) which were falling as direct children under another parent col-. The col- ideally should be children of row rather than col (as far as I understand).

i know this post is old, for anyone trying to get this done simply do this

<table id="example" class="display" cellspacing="0" width="100%"></table>

add width="100%" it should take it and make it responsive without any configuration of such

check out Fiddle Working