html - 表中的 Bootstrap 表不起作用

Question

这是有问题的代码:

<div class="row">
    <div class="col-lg-1"></div>
    <div class="col-lg-10">
        <table class="table table-hover table-bordered table-striped">
            <thead>
                <tr>
                    <td>id</td>
                    <td>msgID</td>
                    <td>carrier</td>
                    <td>sentTime</td>
                </tr>
            </thead>    
            <tbody>
                <tr>
                    <td> 1 </td>
                    <td> 123123132123 </td>
                    <td> asfjo asjfk </td>
                    <td> 2016-01-17 03:22:55 </td>
                </tr>
                <tr>
                    <table class="table">
                        <thead>
                            <td> id </td>
                            <td> msgID </td>
                            <td> carrier </td>
                            <td> incomingTime </td>
                        </thead>
                            <tr>
                                <td> 3 </td>
                                <td> 123123132123 </td>
                                <td> asfjo asjfk </td>
                                <td> 2016-02-17 03:22:55 </td>
                            </tr>
                            <tr>
                                <td> 2 </td>
                                <td> 123123132123 </td>
                                <td> asfjo asjfk </td>
                            </tr>
                    </table>
                </tr>
                <tr>
                    <td> 2 </td>
                    <td> 123123132143 </td>
                    <td> asfjo asjfk </td>
                    <td> 2016-01-17 03:22:55 </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-lg-1"></div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/static/js/jquery-2.2.0.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/static/js/bootstrap.min.js"></script>

似乎当它到达表格中的表格标签时，浏览器认为我错误地错过了第一个表格的结束标签，所以它会自动为我完成。所以内表标签之后的所有内容都被破坏了。

我这里有什么地方做错了吗？

Answer 1

你错过了 <td> or <th> <tr> 之后的标签标签，这就是它无法正确呈现的原因。

在<td> or <th>内插入表格喜欢:

<tr>
     <td colspan=4>
          <!--TABLE GOES HERE-->
     </td>
</tr>

注意 colspan=[total number of cols] .这将使表格适合整行。

更新:

这是没有问题的代码(注意我去掉了两个 div 并使用了一个 col-lg-offset-1 类):

<div class="row">
    <div class="col-lg-10 col-lg-offset-1">
        <table class="table table-hover table-bordered table-striped">
            <thead>
                <tr>


                    <td>id</td>



                    <td>msgID</td>




                    <td>carrier</td>



                    <td>sentTime</td>




                </tr>
            </thead>    
            <tbody>

                <tr>


                    <td> 1 </td>



                    <td> 123123132123 </td>




                    <td> asfjo asjfk </td>



                    <td> 2016-01-17 03:22:55 </td>




                </tr>

                <tr >
                    <td colspan=4>

                        <table class="table">
                        <thead>

                                <td> id </td>

                                <td> msgID </td>


                                <td> carrier </td>

                                <td> incomingTime </td>

                        </thead>

                            <tr>

                            <td> 3 </td>

                            <td> 123123132123 </td>

                            <td> asfjo asjfk </td>

                            <td> 2016-02-17 03:22:55 </td>

                            </tr>

                            <tr>

                            <td> 2 </td>

                            <td> 123123132123 </td>

                            <td> asfjo asjfk </td>

                            <td> 2016-01-17 03:22:55 </td>

                            </tr>

                    </table>

                    </td>

                </tr>


                <tr>


                    <td> 2 </td>



                    <td> 123123132143 </td>



                    <td> asfjo asjfk </td>



                    <td> 2016-01-17 03:22:55 </td>




                </tr>


            </tbody>
        </table>
    </div>
</div>