Fit HTML table inside Bootstrap dialog

Question

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..

    Email | Name| Mobile | Import

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

The HTML code..

       <div class="modal fade" id="myModalTable">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="modal-title">Import Google Contacts</h3>
                </div>
                <div class="modal-body">
                <h5 class="text-center">Please Select the Google Contacts you want to Import</h5>
                <table id="friendsoptionstable" class="table table-striped">
                    <thead>
                        <tr>
                            <th class="tablecell"  width:" auto !important">Email</th>
                            <th class="tablecell">Name</th>
                            <th class="tablecell">Mobile</th>
                            <th class="tablecell">Import</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
                <!--<div class="form-group">
                    <input type="button" class="btn btn-warning btn-sm pull-right" value="Reset">
                    <div class="clearfix"></div>
                </div>-->
                </div>
                <div class="modal-footer">
                <button type="button" class="btn btn-default " data-dismiss="modal" onclick="redirectToPrevPage()">Cancel</button>
                <button class="btn btn-primary" id="addcheckedfriends1" onclick="add_checked_friends()">Save Selected Friends</button>
                <!--<button type="button" class="btn btn-success" onclick="add_checked_friends() >Import Contacts</button>-->
                </div>

            </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>

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..

Answer 1

If you use a combination of table-layout: fixed and word-wrap: break-word on your table then you should be able to get it working.

#friendsoptionstable {
  table-layout: fixed;
  word-wrap: break-word;
}

JSFiddle Here

Additionally - if you want the email column to be wider, you can set a width on each of the 4 columns. Such as, email 50%, name 20%, and both mobile and import at 15%. Just make sure they add up to 100%.

Example Here

Answer 2

You could add text-overflow: ellipses; overflow-x: hidden; to the column in question. I like to add a title attribute so the end-user can still hover over it to get a tooltip of the complete name.

Another option might be to add modal-lg to the modal-dialog class.

Edit Just noticed in the comments that the requirements were to wrap to a 2nd line. This answer doesn't accomplish that, but it might be helpful for others in the future.

Answer 3

If the columns will have long text values without spaces, like the e-mail address, it might help to add word-wrap: break-word to the table cells to allow the browser break very long words.

Another option would be to increase slightly the width of the dialog, since it loks the e-mail address is the only potentially long column:

<div class="modal-dialog" style="width: 800px;">