Bootstrap datatables tables aren't the same

Question

I'm trying to create a bootstrap tabbed div with 3 tabs, each with it's own table (3 seperate datatables - https://datatables.net). I have initialised the 3 tables and tested them but when I create 2 of them with dummy text/values, the second table shrinks so it doesn't fit the full width. This doesn't happen when I initialise the tables with no data and the first table always seems to work as desired, with full width, whether it's initialised with data or not. I just can't seem to see why the consecutive tables are displayed not at full width. Any help is much appreciated. Cheers.

JSFiddle

HTML

<div class="row">
<div class="col-lg-12">
    <div>
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#sent" aria-controls="sent" role="tab" data-toggle="tab">Sent</a></li>
        <li role="presentation"><a href="#received" aria-controls="received" role="tab" data-toggle="tab">Received</a></li>
        <li role="presentation"><a href="#completed" aria-controls="completed" role="tab" data-toggle="tab">Completed</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="sent">
            <br>
                    <div class="dataTable_wrapper">
                        <table class="table table-striped table-bordered table-hover quotes" id="sentTable">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>Reply</th>
                                    <th>Date Created</th>
                                    <th>Last Updated</th>
                                    <th>Quote</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="received">
            <br>
                    <div class="dataTable_wrapper">
                        <table class="table table-striped table-bordered table-hover quotes" id="receivedTable">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>Reply</th>
                                    <th>Date Created</th>
                                    <th>Last Updated</th>
                                    <th>Quote</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- /.table-responsive -->
        </div>
        <div role="tabpanel" class="tab-pane" id="completed">
            <br>
                    <div class="dataTable_wrapper">
                        <table class="table table-striped table-bordered table-hover quotes" id="completedTable">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Description</th>
                                    <th>Reply</th>
                                    <th>Date Created</th>
                                    <th>Last Updated</th>
                                    <th>Quote</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- /.table-responsive -->
        </div>
      </div>

    </div>
</div>
<!-- /.col-lg-12 -->

JavaScript

$(document).ready(function() {
    $('#sentTable').DataTable( {
        "columns": [
            { "data": "title" },
            { "data": "description" },
            { "data": "reply" },
            { "data": "datecreated" },
            { "data": "dateupdated" },
            { "data": "quote" }
        ],
        "data": [{
    "title":"mytitle",
    "description":"mydescription",
    "reply":"cvfsdfgsdfg",
    "datecreated":"2016-07-06 09:20:56",
    "dateupdated":"2016-07-06 15:57:01",
    "quote":"100"
  }]
    } );
    $('#receivedTable').DataTable( {
        "columns": [
            { "data": "title" },
            { "data": "description" },
            { "data": "reply" },
            { "data": "datecreated" },
            { "data": "dateupdated" },
            { "data": "quote" }
        ],
  "data": [{
    "title":"mytitle",
    "description":"mydescription",
    "reply":"cvfsdfgsdfg",
    "datecreated":"2016-07-06 09:20:56",
    "dateupdated":"2016-07-06 15:57:01",
    "quote":"100"
  },
  {
    "title":"mytitle",
    "description":"mydescription",
    "reply":"the best reply by far.",
    "datecreated":"2016-07-06 09:34:59",
    "dateupdated":"2016-07-06 15:57:26",
    "quote":"56"
  }]
    } );
    $('#completedTable').DataTable( {
        "columns": [
            { "data": "title" },
            { "data": "description" },
            { "data": "reply" },
            { "data": "datecreated" },
            { "data": "dateupdated" },
            { "data": "quote" }
        ]
    } );
} );

Answer 1

According to this forum post on the datatables website, this is either a yet-to-be-solved problem (hope not) or it can be solved by calling columns.adjust() whenever you switch tabs. In more detail, you need to call:

$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();

whenever the user switches tabs. Here is the example page where I got that line of code from.

Quote from that page:

The reason this requires special consideration is that when the DataTable is initialised in a hidden element the browser doesn't have any measurements with which to give the DataTable

This could explain the 2nd and 3rd tabs not being correctly sized, althought its odd that they are sized correctly with no data.

However, like it says in that forum post, if after making that change you still have the issue, then you might be out of luck (for now), in which case I'd recommend falling back to BviLLe_Kid's answer. Note that Allan (from that forum post) is the author of the plugin, so if anybody would know, he would.

Answer 2

just a quick fix.. you could just set an inline style to your second table and set the width to 100%.

<div role="tabpanel" class="tab-pane" id="received">
        <br>
                <div class="dataTable_wrapper">
                    <table class="table table-striped table-bordered table-hover quotes" id="receivedTable" style="width:100%">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Description</th>
                                <th>Reply</th>
                                <th>Date Created</th>
                                <th>Last Updated</th>
                                <th>Quote</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <!-- /.table-responsive -->
    </div>