html 我们可以在表格中添加div吗< tr>?

icnyk63a  于 2023-05-15  发布在  其他
关注(0)|答案(9)|浏览(773)

嗨,我试图在每个<tr>上面添加一个div,但是当我查看HTML控制台时,div显示在表之外。下面是HTML代码。

<table>
  <div>
    <tr><td></td></tr>
  </div>
  <div>
    <tr><td></td></tr>
  </div>
</table>

这是不允许的吗?任何帮助都会很好。

pes8fvy9

pes8fvy91#

<div>标记不能在<tr>标记之上使用。相反,您可以使用<tbody>标记来完成您的工作。如果您打算将id属性赋予<div>标记并进行一些处理,您可以通过<tbody>标记实现相同的目的。更多信息,请访问this page
例如:

<table>
    <tbody class="green">
        <tr>
            <td>Data</td>
        </tr>
    </tbody>
    <tbody class="blue">
        <tr>
            <td>Data</td>
        </tr>
    </tbody>
</table>

第二,你可以把**“div”标签放在“td”**标签里面。

<table>
    <tr>
        <td>
            <div></div>
        </td>
    </tr>
</table>

欢迎进一步提问。

8aqjt8rx

8aqjt8rx2#

你不能把div直接放在一个表中,但是你可以把div放在tdth元素中。
为此,您需要确保div位于实际的表格单元格中,即tdth元素,因此请执行以下操作:

HTML:-

<tr>
  <td>
    <div>
      <p>I'm text in a div.</p>
    </div>
  </td>
</tr>

更多信息:-
http://css-tricks.com/using-divs-inside-tables/

axzmvihb

axzmvihb3#

不可以,不能直接在表中插入div。这不是正确的html,将导致意外的输出。
我很乐意更有见地,但你还没有说你在尝试什么,所以我真的不能提供一个替代方案。

ohfgkhjo

ohfgkhjo4#

不能使用标记创建多个标记的组。如果你想为任何目的创建一组标签,比如 AJAX 中更改特定的组,或者在CSS中更改特定标签的样式等。然后使用

<table>
  <tbody id="foods">
    <tr>
      <td>Group 1</td>
    </tr>
    <tr>
      <td>Group 1</td>
    </tr>
  </tbody>

  <tbody id="drinks">
    <tr>
      <td>Group 2</td>
    </tr>
    <tr>
      <td>Group 2</td>
    </tr>
  </tbody>
</table>
ahy6op9u

ahy6op9u5#

在html表中,<table>标签预期<tr>标签在其自身之后,<tr>标签预期<td>标签在其自身之后。因此,如果你想在table中放入一个div,你可以把它放在<td></td>标签之间作为数据。

<table>
  <tr>
    <td>
      <div>
        <p>It works well</p>
      </div>
     </td>
  </tr>
<table>
ndh0cuux

ndh0cuux6#

如果我们按照w3 org table reference,并按照Permitted Contents部分,我们可以看到table标签将tbody(可选)和tr作为唯一允许的内容。
所以我认为可以肯定地说,我们不能添加一个div标签,它是一个流内容,作为table的直接子元素,我理解这就是你在上面说的tr的意思。
话虽如此,当我们按照上面的链接,你会发现它是安全的使用divtd元素,如这里所示

7gs2gvoe

7gs2gvoe7#

div不能添加到tr中,但这里有一个替代解决方案。
我尝试在***tr***中添加一个div,但似乎***td***应该是***tr***的直接子元素,这样它才能正常工作。
在***td***内添加div可以正常工作。
我想你是想为整个***tr***添加一些背景或边框半径。下面是我如何在我的项目中实现类似的结果。

我使用colspan和flex属性来实现这一点。

.flex-container{
  display: flex;
  margin: 5px;
}
table{
  border: 1px solid red;
}
tr{
  border: 1px solid green;
  padding: 5px;
}
.flex-container .col{
  box-sizing: border-box;
  border: 1px solid;
  padding: 5px;
  border-radius: 5px;
  margin: 5px;
  background: skyblue;
}
<table>
  <tr>
    <!-- Assuming you have 4 columns -->
    <td colspan="4">
      <div class="flex-container">
        <div class="col"> Item 1 </div>
        <div class="col"> Item 2 </div>
        <div class="col"> Item 3 </div>
      </div>
    </td>
  </tr>
</table>
pkln4tw6

pkln4tw68#

每当它将在小设备上呈现时,问题就会发生。<td>内部的元素<div>将出现在移动的响应屏幕中。

ibps3vxo

ibps3vxo9#

你可以使用display: table-row-group作为div。

<table>
  <div style="display: table-row-group">
    <tr><td></td></tr>
  </div>
  <div style="display: table-row-group">
    <tr><td></td></tr>
  </div>
</table>

相关问题