< div>标签在< table>之外标签 [英] <div> tags get outside of <table> tag

问题描述

我一直想做的是将< div> 标记合并到< table> ，部分替换< tr> 。

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>

为简单起见，我想让您想象一下该表是动态生成的，基于基于 @foreach（$ orders作为$ order）的结果（我使用的是Laravel 5），该表包括两部分-一部分由<$组成c $ c>< tr> ，另一个在÷ div $ 内部。

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

最后，我将通过单击< tr class = 1stPart来隐藏/显示< div> > 。或使用AngularJS的 ngShow 或JQuery的 hide（）。

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().

但是，令我惊讶的是，div标签在运行时总是会移到表外，只能从开发人员工具中进行确认。

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'd appreciate if you'd give any advice.

推荐答案

问题：

在开发人员工具中，您在表 div c>元素，因为在HTML结构中将< div> 直接放在< table> 内无效，这就是为什么在浏览器中会在< table> 之外显示< div> 的原因无效的HTML代码。

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.

注意：

所以您只需要知道何时您正在处理表格，是诸如< div> ，< span> 等内容块...不能直接放在< table> 或< tr> 标记内，但是您可以将它们放置在< td> 或< th> 元素中。

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.

参考：

请检查以下内容的使用上下文部分中的允许的内容 < table> MDN规范 以获取更多详细信息。

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

这篇关于< div>标签在< table>之外标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！