在 Bootstrap 对话框中调整 HTML 表格答案

【问题标题】：Fit HTML table inside Bootstrap dialog在 Bootstrap 对话框中调整 HTML 表格
【发布时间】：2026-01-02 12:40:01
【问题描述】：

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

    Email | Name| Mobile | Import

当电子邮件的长度很小时，表格完全适合对话框，但如果列表中的电子邮件 ID 很长，则最后 2 列（移动、导入）不适合对话框

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>

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

【问题讨论】：

为澄清起见，您是希望较长的电子邮件换行到第二行，还是“隐藏”在名称列后面？
我希望电子邮件换行到第二行..

标签： javascript jquery html css twitter-bootstrap

【解决方案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

【讨论】：

【解决方案2】：

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

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

编辑刚刚在 cmets 中注意到要求是换行到第二行。这个答案并没有做到这一点，但它可能对未来的其他人有所帮助。

【讨论】：

【解决方案3】：

如果列将包含没有空格的长文本值，例如电子邮件地址，则将word-wrap: break-word 添加到表格单元格以允许浏览器中断很长的单词可能会有所帮助。

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

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

【讨论】：

【解决方案4】：

你应该检查一下：

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

这样它会自动使用水平滚动。

【讨论】：