bootstrap table inside modal size issues

Question

I have a bootstap modal with tabs in the modal body. In each tab i have a regular table, the rows are later appended into the table with jquery.

My issue is that the text in the columns never linebreak, so the right side of the table is shown outside of the modal body.

How can i fix this? This is my HTML modal.

<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

try using word-wrap:break-word in your css to break the line in the coloumn and width:auto for your table to restrict its size in the modal.