css - 表格、表格行和表格单元格的异常嵌套

Question

我想将几个嵌套的div(如下图)转换成一个CSS表格结构，显示样式为table、table-row和table-cell。这很好用。但是 DOM 结构中还有一些其他元素(在下面用类“红色”和“蓝色”标识)，我无法删除这些元素，但我不需要它们来显示在屏幕上。如果我将这些元素留在 DOM 树中，表结构将无法正确显示。有没有可能让它们进入 DOM 树但在显示时忽略它们？

<div style="display: table">
  <div class="blue">
    <div style="display: table-row">
      <div class="red">
        <div style="display: table-cell">
          ...
        </div>
        <div style="display: table-cell">
          ...
        </div>
      </div>
    </div>
    <div style="display: table-row">
      <div class="red">
        <div style="display: table-cell">
          ...
        </div>
        <div style="display: table-cell">
          ...
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

为什么要重新发明轮子？如果你想使用 table 就去做吧，不要假装你没有用 divs 自己实现它。你没有得到任何东西，只会浪费你的时间。

我能想象的唯一场景是您无法访问 HTML - 否则为什么您不能删除这些 div .red 和 .blue？

现在针对您的真正问题。您显然不能向 .red 和 .blue 添加 display: none 或 visibility: hidden，但您可以尝试 display: inline;。无论如何，祝你好运!