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

问题

I have a structure similar to this:

<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>

Is there a way to "skip" or "ignore" the unnecessary elements so that they would not affect the rendering of the table? The structure is generated by an eCommerce plugin for Wordpress and I don't want to go around hacking it's source if I can avoid it.

Sure, I can make only the deepest three levels to display like a table, tr and td's, but then it will not look like a table, but three tables stacked on each other.

回答1:

The more elegant solution is to make sure this doesn't happen. Tables don't look like that, and there is no styling available to make them look like that!
So, assuming you can't change the resulting HTML at all, here is a makeshift solution to change the DOM tree after the fact. But only as a last ditch effort, mind you!

(I also included some CSS to make the table look like a table, but I'm pretty sure you already have styles of your own, so you can ignore the CSS bit.)

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>

来源：https://stackoverflow.com/questions/32992207/is-there-a-way-to-skip-unnecessary-elements-in-a-nesting-structure-when-using

标签

css

css-tables