<div> tags get outside of <table> tag

问题

What I've been trying to do is to incorporate <div> tag inside of a <table>, partially replacing <tr>.

    <table ng-controller="TableController as tc">
        @foreach ($orders as $order)
        <tr class="1stPart">
            //<td>
        </tr>
        <!--From here, <div> is incorporated -->
        <div id="id{{$order->id}}" ng-show'isShow == {{$order->id}}'>
            <tr class="2ndPart">
                //<td>
            </tr>
        </div>
        @endforeach
    </table>

For the sake of simplicity, I'd like you to imagine that this table is dynamically generated, based on the result of @foreach ($orders as $order) (I'm using Laravel 5), and that this table consists of two parts - one is made of <tr>, the other is inside of <div>.

Ultimately, I'll make a function to hide/show the <div> by clicking the <tr class="1stPart">. either with AngularJS's ngShow or JQuery's hide().

However, to my surprise, the div tag always gets outside of the table when it is run, which can only be confirmed from the Developer tool.

(i.e. Right click -> inspect -> elements)

    <div id="id{{$order->id}}" ng-show'isShow == {{$order->id}}'>

        </div>
    <table ng-controller="TableController as tc">
        @foreach ($orders as $order)
        <tr class="1stPart">
            //<td>
        </tr>
        <!--From here, <div> is incorporated -->
            <tr class="2ndPart">
                //<td>
            </tr>
        @endforeach
    </table>

I'm clueless to understand what's going on.

I'd appreciate if you'd give any advice.

回答1:

Problem:

In the developer tool you see the div outside the table element because it's not valid in HTML structure to put a <div> directly inside a <table>, that's why in the browser you will get the <div> rendered outside the <table> as it's an invalid HTML code.

Note:

So all you need to know when you are dealing with tables, is that content blocks such as <div>, <span> ... can't be putted directly inside the <table> or <tr> tags, but you can put them inside a <td> or a <th> elements instead.

Reference:

Please check Permitted Content in the Usage Context section of the <table> MDN Specification for further details.

回答2:

You can't wrap table elements (tr, td, th or any other table element).

If you check source of page, you will see that structure is not changed.

Dev tools will always show illegal wrappers outside of elements.
Dev tools will not show elements that has wrong closing (like <form> without </form>)

来源：https://stackoverflow.com/questions/36328003/div-tags-get-outside-of-table-tag