Question

我一直在尝试将<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>内。

最后，我会点击{{1}创建隐藏/显示<div>的功能}。使用AngularJS的<tr class="1stPart">或JQuery的ngShow。

然而，令我惊讶的是，div标签在运行时始终会在表外部进行，这只能通过开发人员工具。

（即右击 - ＆gt;检查 - ＆gt;元素）

hide()

我无法理解发生了什么。

<如果你给出任何建议，我会很感激。

Answer 1

您无法换行表格元素（tr，td，th或任何其他表格元素。）

如果您查看页面来源，您将看到该结构未被更改。

开发工具将始终在元素之外显示非法包装开发工具不会显示关闭错误的元素（例如<form>没有</form>）

Answer 2

<强>问题：

在开发人员工具中，您会看到div元素之外的table，因为它在HTML结构中无效，无法将<div>直接放入<table>这就是为什么在浏览器中，<div>会在<table>之外呈现，因为它是无效的HTML代码。

注意：

因此，您在处理表时需要知道的是<div>，<span>等内容块是否无法直接放在{{1}内}或<table>标记，但您可以将它们放在<tr>或<td>元素中。

<强>参考：

请查看<table> MDN Specification的使用情况部分中的允许的内容以获取更多详细信息。

<div>标签位于标签之外

2 个答案: