Question

我正在生成一个我想要显示为表格的DOM。使用display: table和关联的CSS值对以下内容非常有用：

＆＃13;

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

＆＃13;

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

＆＃13;

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

可悲的是，当引入任意节点（CSS完全相同）时，这不再有效：

＆＃13;

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

＆＃13;

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

＆＃13;

这次，单元格高度与行中最高的单元格不同。怎么解决这个问题？这是一个小提琴：https://jsfiddle.net/7a9unbmp/1/

为什么那里有任意元素？ DOMular节点由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>

Answer 2

您可以使用my-el或者设置固定线高度，并将该元素称为高度。

CSS
.example {

 line-heigth: 80px;
 }

使用display：带有额外标签的表格会导致单元格不是全高

2 个答案:

FIDDLE