不能在 <table> 中执行 <div>，但是 <table> 中的 <caption> 中的 <div> 是允许的

Question

我们收到警告 Warning: validateDOMNesting(...): <div> cannot appear as a child of <table>。并且我们了解警告以及我们做错了什么：

不好

<table>
  <div>Shouldn't do this</div>
</table>

<caption> 是 <table> 中允许的元素，而 div 嵌套在 <caption> 中，我们不再收到警告。这在结构上有什么问题吗？ table里面还有一个div，只是嵌套的深了一层...或者这样可以吗？

这样可以吗？

<table>
  <caption>
    <div>No more warning with this</div>
  </caption>
</table>

Answer 1

是的，如果 div 被定义为 table 单元格.

，它将是有效的

为 div 设置规则 display: table-cell:

div {
    display: table-cell;
}

Answer 2

不可以，您不能直接在 table 中插入 div。它不正确 HTML，将导致意外输出。

我不明白，你想在 table 中应用 div？为什么会这样？

Well caption is part of table same like other tags (tr, td, th) It permitted in an element, as its first descendant.

阅读更多关于 caption here

cannot do <div> in <table>, but is <div> in <caption> in <table> allowed