代码之家 › 专栏 › 技术社区 › trouselife

Django和HTML-在<td>元素中放置一个div会使它出现在错误的位置

django css html

trouselife · 技术社区 · 4 年前

我正在试着渲染一张桌子 <td> 元素a <div> 为了执行AJAX调用以替换内部所包含的内容 <div> 然而,当我查看我的html页面时 <div> 放错地方了。我正在使用 {% include %} django的功能,这是原因吗?

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>

data_details.html

<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元素现在位于表之外。为什么会发生这种情况?

2 回复 | 直到 4 年前

Magiczne 4 年前

div 根据w3c,不是表内的有效html元素。

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

此外,你 thead 布局也无效。它应该是这样的:

<thead>
    <tr>
        <th>headers</th>
        <th>headers</th>
        <th>headers</th>
        <th>headers</th>
    </tr>
</thead>

使用 W3C validator 如果你不确定你的HTML语法是否正确。

Biplove Lamichhane 4 年前

试试这个,

div 应该在里面 td 作为 tr 无法接受 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>
           <!-- This line -->
           <td>
               {% include 'results/other_templates/data_details.html' %}
           </td>
      </tr>
 </table>

编辑

正如@Magiczne所建议的那样, th 也应该在里面 tr :

  <thead>
      <tr>
         <th>headers</th>
         <th>headers</th>
         <th>headers</th>
         <th>headers</th>
      </tr>
  </thead>

此外,你的 data_details.html 也应固定为sthg,如:

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

推荐文章