Question

想象一下以下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是表行的子代。

Answer 1

我希望能够告诉渲染器完全忽略<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>

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

1 个答案: