在Bootstrap对话框中调整HTML表格

Question

我正在为我的网站创建一个BootStrap对话框,用户可以通过该对话框导入他的谷歌联系人.该对话框有一个表格,里面有4列.只有表头是静态的,行代码由JavaScript代码动态填充.4列是......

    Email | Name| Mobile | Import

当电子邮件的长度很小时,表格完全适合对话框,但如果列表中有一个很长的电子邮件ID,则最后两列(移动,导入)不适合对话框

HTML代码..

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

正如您在屏幕截图中看到的那样,由于第3个电子邮件ID太长,最后2列不在对话框中.我希望将长电子邮件包装到第二行,以便整个表格适合对话框.我尝试设置特定表头的宽度来实现这一点,但问题仍然存在.无法理解我哪里出错了.请帮忙..

Answer 1

如果您使用桌面上table-layout: fixed和word-wrap: break-word桌面上的组合,那么您应该能够使其正常工作.

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

JSFiddle在这里

此外 - 如果您希望电子邮件列更宽,则可以在4列中的每一列上设置宽度.例如,电子邮件50%,名称20%,移动和导入都是15%.只需确保它们加起来达到100%.

这里的例子