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 Here

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

Example Here

Answer 2

如果列的长文本值没有空格（如电子邮件地址），则可能有助于将word-wrap: break-word添加到表格单元格中，以允许浏览器中断非常长的单词。

另一个选择是稍微增加对话框的宽度，因为它会使电子邮件地址成为唯一可能很长的列：

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

Answer 3

您可以将text-overflow: ellipses; overflow-x: hidden;添加到相关列中。我想添加title属性，以便最终用户仍然可以将鼠标悬停在其上以获取完整名称的工具提示。

另一种选择可能是将modal-lg添加到modal-dialog类。

修改的刚刚在评论中注意到要求是包装到第二行。这个答案并没有实现，但未来可能对其他人有所帮助。

Answer 4

你应该检查一下：

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

由此它将使用水平滚动自动。

在Bootstrap对话框

4 个答案: