Css 如何将嵌套元素用作表单元格

想象一下下面的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>

这将在一个单元格中显示参赛者的姓名和国家，在另一个单元格中显示分数

我想要的是能够有三列，包括名称、国家和分数，但不改变HTML。这可能吗

换句话说，理想情况下，我希望能够告诉渲染器完全忽略

，并假设

名称

和

国家

是表行的子项

我希望能够告诉渲染器完全忽略

，并假设name和country是表行的子项

这就是

显示的内容：内容可以（）

使元素的子元素显示为元素父元素的直接子元素，忽略元素本身


。排行榜{
显示：表格；
}
.进入{
显示：表格行；
}
分数
名称
.国家{
显示：表格单元格；
填充：10px；
}
.参赛者{
显示：内容；
}

罗伯特
爱尔兰
32
丹
美国
81
Competitor下名称和国家的嵌套逻辑上不允许出现这种情况。@johannes，为什么是CSS3而不是CSS？这里涉及哪些CSS3功能？@Johannes它是在level2（）而不是3hmm上定义的，您的链接显示没有IE和Edge支持：-/有人能负担得起不支持IE吗？@Johannes是的，这是一个新功能，但它完全符合OP所说的，所以它值得作为一个答案，因为它在现代浏览器上有很好的支持。我也不喜欢Edge，但我想它仍然被认为是一款“现代”浏览器。。。
.leaderboard {
    display: table;
}
.entry {
    display: table-row;
}
.contestant, .score {
    display: table-cell;
}