Datatables in Bootstrap modal width
<p>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  </p>

<p><a href="https://i.stack.imgur.com/bLvIJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bLvIJ.png" alt="enter image description here"></a></p>

<p><strong>My jQuery calling the Datatables</strong></p>

<pre><code>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 '&lt;button class="btn btn-default btn-sm" type="button"&gt;Manage&lt;/button&gt; &lt;button class="btn btn-danger btn-sm"&gt;Delete&lt;/button&gt;';
         }
      }]        
  });   
}
</code></pre>

<p><strong>My HTML</strong></p>

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

    &lt;div class="modal-dialog modal-wide"&gt;

        &lt;div class="modal-content"&gt;

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

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

                &lt;button type="button" class="btn btn-primary" id="saveValidTags"&gt;Save&lt;/button&gt;
                &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
            &lt;/div&gt;

        &lt;/div&gt;

    &lt;/div&gt;

&lt;/div&gt;
</code></pre>