Datatables in Bootstrap modal width

Question

In my modal I am trying to put Datatables in there, the problem I'm having is that the width is incorrect, it should be the width of the modal but it is actually like this

My jQuery calling the Datatables

function getValidTags(){
      var ruleID = $('.ruleID').val();

      var table = $('.valid-tags').DataTable({
      "ajax": {
          "url": "/ajax/getValidTags.php",
          "type": "POST",
          "data": {
            ruleID: ruleID
          },
      },
      "columnDefs": [{
         "targets": 2,
         "render": function(data, type, full, meta){
            return '<button class="btn btn-default btn-sm" type="button">Manage</button> <button class="btn btn-danger btn-sm">Delete</button>';
         }
      }]        
  });   
}

My HTML

<!-- Modal where you will be able to add new rule -->
<div class="modal fade validation-list-modal" tabindex="-1" role="dialog" aria-labelledby="LargeModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

    <div class="modal-dialog modal-wide">

        <div class="modal-content">

            <div class="modal-header modal-header-custom">
            <input class="ruleID" type="hidden"></input>     
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                <h4 class="modal-title modal-title-main">Create New Rule</h4>
            </div>

            <div class="modal-body">
            <div class="topBar">                       
                <div>
                    <input type="text" class="validTags inputTextStyling">
                </div>
            </div>
                <table class="table table-striped table-condensed valid-tags">
                    <thead>
                        <tr>
                            <th>Tag Name</th>
                            <th>Autofixes</th>
                            <th>Manage</th>
                        </tr>
                    </thead>
                    <tbody class="validTagsTable">
                    </tbody>                    
                </table>                           
            </div>
            <div class="modal-footer">

                <button type="button" class="btn btn-primary" id="saveValidTags">Save</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>

        </div>

    </div>

</div>

Answer 1

I find this more appropriate solution,

First make your table width 100% like this:

<table width="100%" id="datatable"></table>

then initialize your table

$('#datatable').DataTable();

and this this

$(document).on('shown.bs.modal', function (e) {
      $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
});

Answer 2

For starters try adding following class to your table element

.dataTableLayout {
    table-layout:fixed;
    width:100%;
}

It would be good if you could make a fiddle of your code with dummy data for solving your problem.

Answer 3

I dont think the accepted answer is the correct answer. There should be no need at all for altering the CSS. It could cause unexpected issues elsewhere. The problem is, that the container (the modal) not is fully established at the time the dataTable is rendered. Look at columns.adjust() :

var table = $('#example').DataTable({
  initComplete: function() {
     this.api().columns.adjust()
  }
  ...
})  

or

$('.modal').on('shown.bs.modal', function() {
  table.columns.adjust()
})