嗨,我试图在每个<tr>上面添加一个div,但是当我查看HTML控制台时,div显示在表之外。下面是HTML代码。
<tr>
<table> <div> <tr><td></td></tr> </div> <div> <tr><td></td></tr> </div> </table>
这是不允许的吗?任何帮助都会很好。
pes8fvy91#
<div>标记不能在<tr>标记之上使用。相反,您可以使用<tbody>标记来完成您的工作。如果您打算将id属性赋予<div>标记并进行一些处理,您可以通过<tbody>标记实现相同的目的。更多信息,请访问this page例如:
<div>
<tbody>
id
<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>
欢迎进一步提问。
8aqjt8rx2#
你不能把div直接放在一个表中,但是你可以把div放在td或th元素中。为此,您需要确保div位于实际的表格单元格中,即td或th元素,因此请执行以下操作:
td
th
HTML:-
<tr> <td> <div> <p>I'm text in a div.</p> </div> </td> </tr>
更多信息:-http://css-tricks.com/using-divs-inside-tables/
axzmvihb3#
不可以,不能直接在表中插入div。这不是正确的html,将导致意外的输出。我很乐意更有见地,但你还没有说你在尝试什么,所以我真的不能提供一个替代方案。
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>
ahy6op9u5#
在html表中,<table>标签预期<tr>标签在其自身之后,<tr>标签预期<td>标签在其自身之后。因此,如果你想在table中放入一个div,你可以把它放在<td>和</td>标签之间作为数据。
<table>
<td>
</td>
<table> <tr> <td> <div> <p>It works well</p> </div> </td> </tr> <table>
ndh0cuux6#
如果我们按照w3 org table reference,并按照Permitted Contents部分,我们可以看到table标签将tbody(可选)和tr作为唯一允许的内容。所以我认为可以肯定地说,我们不能添加一个div标签,它是一个流内容,作为table的直接子元素,我理解这就是你在上面说的tr的意思。话虽如此,当我们按照上面的链接,你会发现它是安全的使用div在td元素,如这里所示
table
tbody
tr
div
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>
pkln4tw68#
每当它将在小设备上呈现时,问题就会发生。<td>内部的元素<div>将出现在移动的响应屏幕中。
ibps3vxo9#
你可以使用display: table-row-group作为div。
display: table-row-group
<table> <div style="display: table-row-group"> <tr><td></td></tr> </div> <div style="display: table-row-group"> <tr><td></td></tr> </div> </table>
9条答案
按热度按时间pes8fvy91#
<div>
标记不能在<tr>
标记之上使用。相反,您可以使用<tbody>
标记来完成您的工作。如果您打算将id
属性赋予<div>
标记并进行一些处理,您可以通过<tbody>
标记实现相同的目的。更多信息,请访问this page例如:
第二,你可以把**“div”标签放在“td”**标签里面。
欢迎进一步提问。
8aqjt8rx2#
你不能把div直接放在一个表中,但是你可以把div放在
td
或th
元素中。为此,您需要确保div位于实际的表格单元格中,即td或th元素,因此请执行以下操作:
HTML:-
更多信息:-
http://css-tricks.com/using-divs-inside-tables/
axzmvihb3#
不可以,不能直接在表中插入div。这不是正确的html,将导致意外的输出。
我很乐意更有见地,但你还没有说你在尝试什么,所以我真的不能提供一个替代方案。
ohfgkhjo4#
不能使用标记创建多个标记的组。如果你想为任何目的创建一组标签,比如 AJAX 中更改特定的组,或者在CSS中更改特定标签的样式等。然后使用
前
ahy6op9u5#
在html表中,
<table>
标签预期<tr>
标签在其自身之后,<tr>
标签预期<td>
标签在其自身之后。因此,如果你想在table中放入一个div,你可以把它放在<td>
和</td>
标签之间作为数据。ndh0cuux6#
如果我们按照w3 org table reference,并按照Permitted Contents部分,我们可以看到
table
标签将tbody
(可选)和tr
作为唯一允许的内容。所以我认为可以肯定地说,我们不能添加一个
div
标签,它是一个流内容,作为table
的直接子元素,我理解这就是你在上面说的tr
的意思。话虽如此,当我们按照上面的链接,你会发现它是安全的使用
div
在td
元素,如这里所示7gs2gvoe7#
div不能添加到tr中,但这里有一个替代解决方案。
我尝试在***tr***中添加一个div,但似乎***td***应该是***tr***的直接子元素,这样它才能正常工作。
在***td***内添加div可以正常工作。
我想你是想为整个***tr***添加一些背景或边框半径。下面是我如何在我的项目中实现类似的结果。
我使用colspan和flex属性来实现这一点。
pkln4tw68#
每当它将在小设备上呈现时,问题就会发生。
<td>
内部的元素<div>
将出现在移动的响应屏幕中。ibps3vxo9#
你可以使用
display: table-row-group
作为div。