引导表内模态大小问题

Question

我有一个引导模态与制表符在模态体。在每个选项卡中，我都有一个常规表，稍后使用jquery将行添加到表中。

我的问题是，在列中的文本从来没有换行，所以表的右侧显示在模态体的外面。

我怎么能解决这个问题?这是我的HTML模式。

<div class="modal modal-wide fade" id="detailsmodal" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="details">Detaljer</h4>
            </div>
            <div class="modal-body" id="detailsmodalBody">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#MetaDataTab" data-toggle="tab">MetaData</a></li>
                    <li><a href="#EnhetTab" data-toggle="tab">Enhet</a></li>
                    <li><a href="#ApparTab" data-toggle="tab">Appar</a></li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="MetaDataTab">
                        <br />
                        <br />
                        <table id="detailvalues" class="table table-bordered">
                            <thead>
                                <tr bgcolor="#4d4f53">
                                    <th>Metadata</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>AppleID#1: </td>
                                    <td id="modalMetaDataCol1">No data</td>
                                </tr>
                                <tr>
                                    <td>AppleID Password#1: </td>
                                    <td id="modalMetaDataCol2">No data</td>
                                </tr>
                                <tr>
                                    <td>AppleID#2: </td>
                                    <td id="modalMetaDataCol3">No data</td>
                                </tr>
                                <tr>
                                    <td>AppleID Password#2: </td>
                                    <td id="modalMetaDataCol4">No data</td>
                                </tr>
                                <tr>
                                    <td>SIMpin: </td>
                                    <td id="modalMetaDataCol5">No data</td>
                                </tr>
                                <tr>
                                    <td>Losekod: </td>
                                    <td id="modalMetaDataCol6">No data</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane" id="EnhetTab">
                        <br />
                        <br />
                        <table class="table table-bordered" id="devicedetailsTable">
                            <thead>
                                <tr bgcolor="#4d4f53">
                                    <th>Detalj</th>
                                    <th>Värde</th>
                                </tr>
                            </thead>
                            <tbody id="devicedetails">
                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane" id="ApparTab">
                        <br />
                        <br />
                        <table class="table table-bordered">
                            <thead>
                                <tr bgcolor="#4d4f53">
                                    <th>Apps</th>
                                </tr>
                            </thead>
                            <tbody id="appvalues">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>

Answer 1

尝试在css中使用word-wrap:break-word在列中断行，width:auto在表中限制其在模态中的大小。