title: Fit HTML table inside Bootstrap dialog
body: <p>I'm creating a BootStrap dialog box for my website through which a user can import his google contacts. The dialog box has a table with 4 columns inside it. Only the table headers are static, the rows are being populated dynamically by JavaScript code. The 4 columns are..</p>
  
  <pre><code>    Email | Name| Mobile | Import
  </code></pre>
  
  <p>When the length of emails is small then the table fits perfectly inside the dialog box but if there is a long email id in the list the last 2 columns(Mobile,Import) do not fit in the dialog box</p>
  
  <p>The HTML code..</p>
  
  <pre><code>       &lt;div class="modal fade" id="myModalTable"&gt;
          &lt;div class="modal-dialog"&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;×&lt;/button&gt;
                  &lt;h3 class="modal-title"&gt;Import Google Contacts&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                  &lt;h5 class="text-center"&gt;Please Select the Google Contacts you want to Import&lt;/h5&gt;
                  &lt;table id="friendsoptionstable" class="table table-striped"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th class="tablecell"  width:" auto !important"&gt;Email&lt;/th&gt;
                              &lt;th class="tablecell"&gt;Name&lt;/th&gt;
                              &lt;th class="tablecell"&gt;Mobile&lt;/th&gt;
                              &lt;th class="tablecell"&gt;Import&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
  
                      &lt;/tbody&gt;
                  &lt;/table&gt;
                  &lt;!--&lt;div class="form-group"&gt;
                      &lt;input type="button" class="btn btn-warning btn-sm pull-right" value="Reset"&gt;
                      &lt;div class="clearfix"&gt;&lt;/div&gt;
                  &lt;/div&gt;--&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default " data-dismiss="modal" onclick="redirectToPrevPage()"&gt;Cancel&lt;/button&gt;
                  &lt;button class="btn btn-primary" id="addcheckedfriends1" onclick="add_checked_friends()"&gt;Save Selected Friends&lt;/button&gt;
                  &lt;!--&lt;button type="button" class="btn btn-success" onclick="add_checked_friends() &gt;Import Contacts&lt;/button&gt;--&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;&lt;!-- /.modal-content --&gt;
              &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>As you can see in the screen-shot, because of the 3rd email id being too long the last 2 columns are outside the dialog box. I want the long emails to be wrapped to a 2nd line so that the entire table fits inside the dialog box. I tried setting the width of that particular table header to achieve this but still the problem persists. Can't understand where I'm going wrong. Please Help..</p>