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" }
        ]
    } );
} );

Chris H. · Accepted Answer · 2016-07-06 20:13:23Z

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.

Grizzly · Accepted Answer · 2016-07-06 19:13:42Z

0

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>

answered Jul 6, 2016 at 19:13

Grizzly

5,9559 gold badges63 silver badges117 bronze badges

3 Comments

user597889 Over a year ago

Thanks for the idea, I may have to fall back on it, but I was hoping for more of an understanding of why it's happening so I could learn from it.

Grizzly Over a year ago

@user597889 are you positive that all of your CSS styles are the same? I noticed that you do have all of the classes the same per table, but the id's are different.. do you have custom css for each id?

user597889 Over a year ago

No, there is no css at all for the id's. The id's are solely for identifacation.

Collectives™ on Stack Overflow

Bootstrap datatables tables aren't the same

HTML

JavaScript

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JavaScript

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related