使用 CSS display:table 时，有没有办法在嵌套结构中 "skip" 不必要的元素？

Question

我有一个类似这样的结构：

<div style="display:table">
    <div class="unnecessary element">
        <div class="unnecessary element">
            <ul style="display:table-row">
                <li style="display:table-cell">Hello everybody.</li>
                <li style="display:table-cell">This is an example</li>
                <li style="display:table-cell">of a recurring structure</li>
            </ul>
        </div>
    </div>
    <div class="unnecessary element">
        <div class="unnecessary element">
            <ul style="display:table-row">
                <li style="display:table-cell">that has some extra</li>
                <li style="display:table-cell">html elements giving the poor</li>
                <li style="display:table-cell">front end dev a headache.</li>
            </ul>
        </div>
    </div>
    <div class="unnecessary element">
        <div class="unnecessary element">
            <ul style="display:table-row">
                <li style="display:table-cell">Could someone figure out</li>
                <li style="display:table-cell">how to make this mess</li>
                <li style="display:table-cell">behave like a table without changing the markup?</li>
            </ul>
        </div>
    </div>
</div>

有没有办法"skip"或"ignore"不需要的元素，使它们不影响table的渲染？该结构是由 Wordpress 的电子商务插件生成的，如果可以避免，我不想绕过它的源代码。

当然，我只能让最深的三层像table、tr 和td 那样显示，但那样看起来就不像table，而是三个table彼此堆叠。

Answer 1

更优雅的解决方案是确保不会发生这种情况。表格看起来不像那样，也没有可用的样式使它们看起来像那样！
因此，假设您根本无法更改结果 HTML，这是一个临时解决方案，可在事后更改 DOM 树。请注意，这只是最后的努力！

（我还包括了一些 CSS 使 table 看起来像 table，但我很确定你已经有了自己的样式，所以你可以忽略CSS 位。）

var divs = document.querySelectorAll('div[style="display:table"] > div.unnecessary > div');
var content = '';
for (var i = 0; i < divs.length; ++i) content += divs[i].innerHTML;
divs[0].parentNode.parentNode.innerHTML = content;

div[style="display:table"] {
  border-spacing: 2px;
  border: 1px outset #808080;
}
div[style="display:table"] > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
div[style="display:table"] > ul > li {
  vertical-align:middle;
  padding: 2px;
  border: 1px inset #808080;
}

<div style="display:table">
  <div class="unnecessary element">
    <div class="unnecessary element">
      <ul style="display:table-row">
        <li style="display:table-cell">Hello everybody.</li>
        <li style="display:table-cell">This is an example</li>
        <li style="display:table-cell">of a recurring structure</li>
      </ul>
    </div>
  </div>
  <div class="unnecessary element">
    <div class="unnecessary element">
      <ul style="display:table-row">
        <li style="display:table-cell">that has some extra</li>
        <li style="display:table-cell">html elements giving the poor</li>
        <li style="display:table-cell">front end dev a headache.</li>
      </ul>
    </div>
  </div>
  <div class="unnecessary element">
    <div class="unnecessary element">
      <ul style="display:table-row">
        <li style="display:table-cell">Could someone figure out</li>
        <li style="display:table-cell">how to make this mess</li>
        <li style="display:table-cell">behave like a table without changing the markup?</li>
      </ul>
    </div>
  </div>
</div>

使用 CSS display:table 时，有没有办法在嵌套结构中 "skip" 不必要的元素？

Is there a way to "skip" unnecessary elements in a nesting structure when using CSS display:table?

css

css-tables