How to use a nested element as a table cell - css

Question

Imagine the following HTML:
<div class='leaderboard'>
<div class='entry'>
<div class='contestant'>
<div class='name'>Robert</div>
<div class='country'>Ireland</div>
</div>
<div class='score'>32</div>
</div>
<div class='entry'>
<div class='contestant'>
<div class='name'>Dan</div>
<div class='country'>USA</div>
</div>
<div class='score'>81</div>
</div>
</div>
Now, we all know that we can use CSS to make this a two-column table:
.leaderboard {
display: table;
}
.entry {
display: table-row;
}
.contestant, .score {
display: table-cell;
}
This will render the contestant’s name and country within one cell, and the score in another.
What I want is to be able to have three columns, with the name, country, and score, but without changing the HTML. Is this possible?
In other words, ideally, I want to be able to tell the renderer to ignore the <div class='contestants'> entirely and pretend that name and country are children of the table row.

Answer 1

I want to be able to tell the renderer to ignore the <div class='contestants'> entirely and pretend that name and country are children of the table row.
This is what display:contents; will do (https://caniuse.com/#feat=css-display-contents)
causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself.
.leaderboard {
display: table;
}
.entry {
display: table-row;
}
.score,
.name,
.country{
display: table-cell;
padding:10px;
}
.contestant {
display:contents;
}
<div class='leaderboard'>
<div class='entry'>
<div class='contestant'>
<div class='name'>Robert</div>
<div class='country'>Ireland</div>
</div>
<div class='score'>32</div>
</div>
<div class='entry'>
<div class='contestant'>
<div class='name'>Dan</div>
<div class='country'>USA</div>
</div>
<div class='score'>81</div>
</div>
</div>