css - 使用显示 :table with extra tags leads to cells that aren't full height

Question

我正在生成一个要显示为表格的 DOM。使用 display: table 和关联的 CSS 值非常适合以下情况:

.my-table {
    display: table;
}

.my-row {
    display: table-row;
}

.my-cell {
    display: table-cell;
    width: 10em;
    background-color: blue;
}

<div class="my-table">
    <div class="my-row">
        <div class="my-cell">HEADER with very very long content that wraps, making all cells in the row taller</div>
        <div class="my-cell">cell one</div>
        <div class="my-cell">cell two</div>
        <div class="my-cell">cell three</div>
    </div>
</div>

正如您通过运行代码片段所见，所有单元格的高度都与左侧第一个单元格的高度相同。

遗憾的是，这在引入任意节点时不再有效(CSS 是相同的):

.my-table {
    display: table;
}

.my-row {
    display: table-row;
}

.my-cell {
    display: table-cell;
    width: 10em;
    background-color: blue;
}

<div class="my-table">
    <div class="my-row">
        <div class="my-cell">HEADER with very very long content that wraps, making all cells in the row taller</div>
        <my-el>
            <div class="my-cell">cell one</div>
            <div class="my-cell">cell two</div>
            <div class="my-cell">cell three</div>
        </my-el>
    </div>
</div>

这一次，单元格高度与行中最高的单元格不同。如何解决这个问题？这是一个可以玩的 fiddle :https://jsfiddle.net/7a9unbmp/1/

为什么那个任意元素在那里？ DOM 节点由插入一些节点的 Angular 生成。理想情况下，我会找到一种解决方案，该解决方案不必扰乱生成的结构(或者至少不会太多)。

为什么使用 CSS 表格显示而不是实际的 HTML table？它更宽容:如果在 table 中发现任何非表格元素，它们将被浏览器重新设置父级并完全破坏事物......此外，使用普通元素允许我将行组包装到根据他们所属的(子)组隐藏/显示他们......

Answer 1

在您的 <my-el> 上添加以下 CSS元素

my-el {
    display:inline-table; /* or inline-flex*/
    height:100%;
}

FIDDLE

.my-table {
  display: table;
}
.my-row {
  display: table-row;
}
.my-cell {
  display: table-cell;
  width: 10em;
  background-color: blue;
}
my-el {
  display: inline-table; /* or inline-flex */
  height: 100%;
}

<div class="my-table">
  <div class="my-row">
    <div class="my-cell">HEADER with very very long content that wraps, making all cells in the row taller</div>
    <div class="my-cell">cell one</div>
    <div class="my-cell">cell two</div>
    <div class="my-cell">cell three</div>
  </div>
</div>

<br/>
<br/>
<br/>

<div class="my-table">
  <div class="my-row">
    <div class="my-cell">HEADER with very very long content that wraps, making all cells in the row taller</div>
    <my-el>
      <div class="my-cell">cell one</div>
      <div class="my-cell">cell two</div>
      <div class="my-cell">cell three</div>
    </my-el>
  </div>
</div>