CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
lonewaft
lonewaft

Reputation: 890

Bootstrap table within a table not working

Here is the offending code:

<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>

It seems like when it gets to the table tag within the table, the browser thinks I erroneously missed a closing tag for the first table, so it does it automatically for me. So everything after the inner table tag is broken.

Is there something I'm doing wrong here?

Upvotes: 3

Views: 3021

Answers (2)

Kirsten Phukon
Kirsten Phukon

Reputation: 314

    $          <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>

Upvotes: 0

Faisal Ashfaq
Faisal Ashfaq

Reputation: 2678

You're missing the <td> or <th> tag after the <tr> tag that's why it's not rendering properly.

Insert the table inside <td> or <th> like:

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

Notice the colspan=[total number of cols]. This would make the table fit in the entire row.

UPDATE:

Here is the non-offending code(notice i get rid of two divs and used a col-lg-offset-1 class):

<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>

Upvotes: 2

Related Questions