<div> 标签在 <table> 标签之外

【问题标题】：<div> tags get outside of <table> tag<div> 标签在 <table> 标签之外
【发布时间】：2016-07-19 14:07:03
【问题描述】：

我一直在尝试做的是将<div> 标记合并到<table> 中，部分替换<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 as $order) 的结果动态生成的（我使用的是 Laravel 5），并且这个表由两部分组成 - 一个由<tr>组成，另一个在<div>内部。

最终，我将通过单击<tr class="1stPart"> 来创建隐藏/显示<div> 的功能。使用 AngularJS 的 ngShow 或 JQuery 的 hide()。

然而，令我惊讶的是，div标签在运行时总是在表格之外，这只能从开发者工具中确认。

（即右键单击 -> 检查 -> 元素）

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

我不知道发生了什么。

如果您能提供任何建议，我将不胜感激。

【问题讨论】：

• 我认为您必须将

  标签放入 。
• <div> tag inside of a <table>, partially replacing <tr> 你不能那样做。 div 不能替换 tr。您可以将 div 放在 td 中，但如果这确实是您想要的
• 您不能将div 作为table 的直接子代
• 问题是你没有正确理解 html 表格。 div 出现在表格之外，因为 div 不是 table 或 tr 的直接子代。但是您可以在td 中添加它。
• 为什么不能在 tr 标签中使用 id 和 ng-show 而不是 div，div 不能是表的直接子表：