DataTables Responsive Not Resizing at Bootstrap Breakpoint

Question

I'm having an issue and I believe I've narrowed it down to the DataTables Responsive plugin. See Here

So in Bootstrap, I have two columns of six. A DataTable on the left and a div box on the right. When the browser narrows down, these two items should split into their own rows stacked on top of each other with the items centered. However, at that breakpoint, the DataTable doesn't resize to center on the screen. It stays over to the left. If you refresh the page at that width, it will center itself fine, it just doesn't respond to the breakpoint.
If you do the opposite and start the page at the size of a phone and expand the window out, the DataTable will stay scrunched up in a thin column on the left.

If I take out the responsive plugin, it will center itself fine at the breakpoint. However, I want to use this plugin to help with the table at phone size.

Here's an example of what that row looks like.

<div class="row">
    <div class="col-md-6">
        <table id="table1" class="table">
            <thead>
                <tr>
                    <th>data</th>
                    <th>data</th>
                    <th>data</th>
                    <th>data</th>
                 </tr>
            </thead>
            <tbody>
                <tr>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                    <td>data</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-6">
        <div class="box">

        </div>
    </div>
</div><!--End Row-->

Here's the css I'm using

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>    

<link href="//cdn.datatables.net/1.10.8/css/dataTables.dataTables.min.css" rel="stylesheet"/> 

<link href="//cdn.datatables.net/responsive/1.0.7/css/responsive.dataTables.min.css" rel="stylesheet"/>

Here's the js I'm using

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="//cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>

<script src="//cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>

Answer 1

I had an issue like this recently. I don't think you are using bootstrap correctly. Change your divs to the following.

<div class="col-xs-12 col-md-6">

xs, sm, md, lg are the sizes of screens in order from smallest to largest. When you apply col-md-6 it will apply a width of 6 spaces to sizes md and above. You also need to specify that it should take up the full width for screens of sizes xs and above.

Answer 2

I've the same issue and this is my workaround:

$(window).resize(function () {
            $("table.dataTable").resize();
});

Answer 3

Here is an example using DataTables dependencies for Bootstrap.

Are you using the responsive option (responsive: true see below) when you initiate DataTables?

$('#table1').DataTable({
  responsive: true
});

.box {
  height: 100px;
  width: 100%;
  background: lightblue;
  padding: 20px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.8/js/dataTables.bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.8/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <table id="table1" class="table table-striped table-bordered" cellspacing="0">
        <thead>
          <tr>
            <th>data</th>
            <th>data</th>
            <th>data</th>
            <th>data</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-md-6">
      <div class="box">Box</div>
    </div>
  </div>
  <!--End Row-->
</div>