Django和HTML-将div放在a<；td>；元素将其渲染到错误的位置

我试图呈现一个内部带有

的表

元素，以便执行AJAX调用来替换

中包含的内容。但是，当我查看html页面时，

的位置完全错误。我正在使用django的

{%include%}

功能，这是原因吗

main.html

 <table class='table'>
      <thead>
           <th>headers</th>
           <th>headers</th>
           <th>headers</th>
           <th>headers</th>
      </thead>
      <tr>
           <td> data </td>
           <td> data </td>
            {% include 'results/other_templates/data_details.html' %}
      </tr>
 </table>

<div id="{{obj.id}}-detail">
    <td>blah blah blah</td>
    <td>blah blah blah</td>
</div>

标题
标题
标题
标题
资料
资料
{%include'results/other_templates/data_details.html%}

data\u details.html

 <table class='table'>
      <thead>
           <th>headers</th>
           <th>headers</th>
           <th>headers</th>
           <th>headers</th>
      </thead>
      <tr>
           <td> data </td>
           <td> data </td>
            {% include 'results/other_templates/data_details.html' %}
      </tr>
 </table>

<div id="{{obj.id}}-detail">
    <td>blah blah blah</td>
    <td>blah blah blah</td>
</div>

废话废话
废话废话

在呈现页面时查看我的html页面源代码，其呈现方式如下：

 <div id="263-detail">
 </div>

 <table class='table'>
      <thead>
           <th>headers</th>
           <th>headers</th>
           <th>headers</th>
           <th>headers</th>
      </thead>
      <tr>
           <td> data </td>
           <td> data </td>
           <td> blah blah blah </td>
           <td> blah blah blah </td>
      </tr>
 </table>

标题
标题
标题
标题
资料
资料
废话废话
废话废话

div元素现在位于表之外。为什么会发生这种情况？

试试这个

div

应该在

td

内，因为tr不能直接获取

div

因此：

此外，您的

data\u details.html

也应固定为sthg，如：

<div id="{{obj.id}}-detail">
    <table>
        <tr>
            <td>blah blah blah</td>
            <td>blah blah blah</td>
        </tr>
    </table>
</div>

废话废话
废话废话
根据w3c，表中的

div

不是有效的html元素

然后，浏览器尝试通过删除不允许的元素来修复表布局

另外，您的

thead

布局也无效。应该是这样的：

标题
标题
标题
标题

---

如果您不确定HTML语法是否正确，请使用。

谢谢，我意识到我现在在做什么，我认为拆分它会让我觉得它看起来像其他东西！！这不是一个好答案，因为

data\u details.html

的内容仍然是无效的html语法。@trouselife请检查下面我的答案。