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

Timwi 发表于 Dev

Timwi

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

现在，我们都知道可以使用CSS将此表变成两列的表：

.leaderboard {
    display: table;
}
.entry {
    display: table-row;
}
.contestant, .score {
    display: table-cell;
}

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

我想要的是能够具有三列，分别是名称，国家和分数，而无需更改HTML。这可能吗？

换句话说，理想情况下，我希望能够告诉渲染器忽略<div class='contestants'>完全，假装name和country是表行的孩子。

陪同Afif

我希望能够告诉渲染器<div class='contestants'>完全忽略它，并假装名称和国家/地区是表行的子级。

这是要做什么display:contents;（https://caniuse.com/#feat=css-display-contents）

导致元素的子元素看起来像是元素父元素的直接子元素，而忽略了元素本身。

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