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>

Answer 2

    $          <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> 
                <td>incomingMSG</td>
            </tr>
        </thead>    
        <tbody> 
            <tr> 
                <td> 1 </td> 
                <td> 123123132123 </td>  
                <td> asfjo asjfk </td> 
                <td> 2016-01-17 03:22:55 </td> 
                <td> time </td>
            </tr> 
            <tr> 
                <td> 2 </td> 
                <td> 123123132143 </td> 
                <td> asfjo asjfk </td> 
                <td> 2016-01-17 03:22:55 </td> 
                <td> time </td>
            </tr> 
        </tbody>
    </table>
</div>
<div class="col-lg-1"></div>

表中的引导表不起作用

2 个答案: