Fit HTML table inside Bootstrap dialog

Question

I am creating a BootStrap dialog box for my site through which a user can import their Google contacts. In the dialog box there is a table with 4 columns inside it. Only table headers are static; rows are dynamically populated with JavaScript code. 4 columns ...

Email | Name| Mobile | Import 

When the email length is short, the table fits perfectly into the dialog box, but if the list has a long email identifier, the last 2 columns (Mobile, Import) are not suitable in the dialog box

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 on the screen, because the third email id is too long, the last two columns are outside the dialog box. I want long emails to be wrapped to the second line so that the whole table fits inside the dialog box. I tried to set the width of this table header to achieve this, but the problem remains. I can not understand where I am mistaken. Please, help..

Answer 1

If you use a combination of table-layout: fixed and word-wrap: break-word on your table, then you can make it work.

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

JSFiddle Here

Optional - if you want the email column to be wider, you can set the width on each of the 4 columns. For example, email address is 50%, name is 20%, and mobile and import are 15%. Just make sure they add up to 100%.

Example here

Answer 2

If the columns have long text values ​​without spaces, such as an email address, this can help add word-wrap: break-word to the table cells so that the browser can break very long words.

Another option is to slightly increase the width of the dialog, as it is the email address, which is the only potentially long column:

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

Answer 3

You can add text-overflow: ellipses; overflow-x: hidden; text-overflow: ellipses; overflow-x: hidden; in the corresponding column. I like to add the attribute title , the end user could still hang over him to get a tooltip full name.

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

Edit We just noticed in the comments that the requirements should have been moved to the second line. This answer does not achieve this, but may be useful to others in the future.

Answer 4

You should check this:

 $("#friendsoptionstable tbody td").css('width',"30%"); $("#friendsoptionstable tbody td").css('overflow',"auto"); 

In doing so, it will use automaticall horizontal scrolling.