title: jQuery dataTable overflows in bootstrap modal
body: <p>I have a table inside a bootstrap modal. The content that I populate inside the dataTable cells is quite large, and instead of wrapping the text to fit the table inside the modal, it overflows the modal, like it is unable to pick up the modal width and wrap the text.</p>
  
  <p><strong>Screenshot:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/ByqL1.jpg" alt="enter image description here"></p>
  
  <p>I have tried various solutions, such as specifying wrap CSS as well as specifying the table width (in % and px) and setting the width property on the table (in % and px) but there is absolutely no change to the table. Any advice on how to correct this issue would be greatly appreciated.</p>
  
  <p><strong>Code Extract 1 (Modal):</strong></p>
  
  <pre><code>&lt;!-- List Questions Modal --&gt;
  &lt;div class="modal fade" id="questionsModal" tabindex="-1" role="dialog" aria-hidden="true"&gt;
  &lt;div class="modal-dialog" style="width: 95%"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
              &lt;h4&gt;Questions&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;div class="row"&gt;
              &lt;div class="responsive-table"&gt;
                  &lt;table width="900px" class="table table-bordered" style="margin-bottom:2em; width: 900px;" id="questionsTable"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th &gt;Code&lt;/th&gt;
                              &lt;th&gt;Title&lt;/th&gt;
                              &lt;th&gt;Instruction&lt;/th&gt;
                              &lt;th&gt;Extract&lt;/th&gt;
                              &lt;th&gt;class="text-center"&gt;Active&lt;/th&gt;
                              &lt;th class="text-center"&gt;Edit&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p><strong>Code Extract 2 (dataTable population):</strong></p>
  
  <pre><code>function showQuestions(quiz_id)
  {
  $('#questions_quiz_id').val('quiz_id');
  window.questionsTable.fnClearTable();
  $.post('{{ url("getGameQuestions") }}', {quiz_id : quiz_id})
  .done(function(data)
  {
      if (typeof(data.error) != 'undefined')
      {
          $('#error-msg').html(data.error);
          $('#page-error').fadeIn(300).delay(2000).fadeOut(500);
      }
      else
      {
          for(var d in data)
          {
              var question = data[d]; 
              var active = (question.active == undefined || question.active == false) ? "Inactive" : "Active";
  
              var ai = window.questionsTable.fnAddData([
                  question.code,
                  question.title,
                  question.instruction,
                  question.extract,
                  active,
                  '&lt;i class="icon-pencil" style="cursor:pointer; color:#E48A07;" title="Edit" onclick="setQuestion('+question.id+')"&gt;&lt;/i&gt;'
              ]);
              var oSettings = window.questionsTable.fnSettings();
              var addedRow = oSettings.aoData[ai[0]].nTr;
              addedRow.cells.item(2).setAttribute('width','29%');
              addedRow.cells.item(4).className = "text-center";
              addedRow.cells.item(4).className = "text-center";
              addedRow.cells.item(5).className = "text-center";
          }
          $('#questionsModal').modal('show');
      }
  });
  }
  </code></pre>