将子 div 扩展到表 div 父级的高度

Question

我知道这种“将子 div 扩展到父高度”的东西已经过时了，今天我们可以使用 flexbox 和网格来解决问题。但我的问题有点不同。我需要具有动态宽度值的表格格式，具体取决于内容。所以每一行都应该根据那里的内容来决定它的高度和每一列的宽度。列数和行数也是可变的。

这就是为什么我不能使用 flexbox 或基于网格的布局。它们不依赖于彼此的宽度或高度，仅依赖于自己孩子的高度/宽度。

另外：表格里面还有一些其他的标签。不仅仅是文字！

因此我不能使用普通的<table> 标签。表格单元格标签内不允许使用其他html标签。

所以我决定使用<div>标签并通过css将它们设置为表格。

.table {
  background: #bbbb;
  display: table;
}

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

.table-cell {
  border: 1px solid black;
  display: table-cell;
}

.content {
  background: #f005;
}

<div class="table">
    <div class="table-row">
        <div class="table-cell"><div class="content">1 / 1</div></div>
        <div class="table-cell"><div class="content">1 / 2</div></div>
        <div class="table-cell"><div class="content">1 / 3</div></div>
    </div>

    <div class="table-row">
        <div class="table-cell"><div class="content">2 / 1</div></div>
        <div class="table-cell">
            <div class="content">very long content <br /> with line break and all the stuff</div>
        </div>
        <div class="table-cell"><div class="content">2 / 3</div></div>
    </div>

    <div class="table-row">
        <div class="table-cell"><div class="content">Another very long <br /> line <br /> breaking <br /> content and ither <span>html tags</span></div></div>
        <div class="table-cell"><div class="content">3 / 2</div></div>
        <div class="table-cell"><div class="content">3 / 3</div></div>
    </div>
</div >

现在的挑战是将所有<div class="content"> 标签扩展到父/表格单元格的完整宽度和高度。

注意：我不能在这里使用 flexbox，因为 display: 已经用于将 div 显示为表格单元格。

Answer 1

在内容、表格单元格和表格中添加height:100%

.table {
  background: #bbbb;
  display: table;
  height: 100%;
}

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

.table-cell {
  border: 1px solid black;
  display: table-cell;
  height: 100%;
}

.content {
  background: #f005;
  height: 100%;
}

<div class="table">
  <div class="table-row">
    <div class="table-cell">
      <div class="content">1 / 1</div>
    </div>
    <div class="table-cell">
      <div class="content">1 / 2</div>
    </div>
    <div class="table-cell">
      <div class="content">1 / 3</div>
    </div>
  </div>

  <div class="table-row">
    <div class="table-cell">
      <div class="content">2 / 1</div>
    </div>
    <div class="table-cell">
      <div class="content">very long content <br /> with line break and all the stuff</div>
    </div>
    <div class="table-cell">
      <div class="content">2 / 3</div>
    </div>
  </div>

  <div class="table-row">
    <div class="table-cell">
      <div class="content">Another very long <br /> line <br /> breaking <br /> content and ither <span>html tags</span></div>
    </div>
    <div class="table-cell">
      <div class="content">3 / 2</div>
    </div>
    <div class="table-cell">
      <div class="content">3 / 3</div>
    </div>
  </div>
</div>

相关：height: 100% for <div> inside <div> with display: table-cell

Answer 2

网格也可以是一种选择，它需要更少的标记：

.grid {
  background: #bbbb;
  display: grid
}

.c3 {
  grid-template-columns: repeat(3, auto)
}

.shrink {
  width: max-content;
  /* behave alike a table */
  margin: auto;
}

.content {
  border: solid 1px;
  background: #f005;
  padding:0.25em;
}

.grid~.grid .content {
  margin: 2px;
  /* mimic border-spacing*/
}

<div class="grid c3 shrink">
  <!--<div class="table-row">		<div class="table-cell">-->
  <div class="content">1 / 1</div>
  <!--</div>
		<div class="table-cell">-->
  <div class="content">1 / 2</div>
  <!--</div>
		<div class="table-cell">-->
  <div class="content">1 / 3</div>
  <!--</div>	</div>	<div class="table-row">		<div class="table-cell">-->
  <div class="content">2 / 1</div>
  <!--</div>		<div class="table-cell">			-->
  <div class="content">very long content <br /> with line break and all the stuff</div>
  <!--</div>		<div class="table-cell">-->
  <div class="content">2 / 3</div>
  <!--</div>	</div>	<div class="table-row">		<div class="table-cell">-->
  <div class="content">Another very long <br /> line <br /> breaking <br /> content and ither <span>html tags</span></div>
  <!--</div>		<div class="table-cell">-->
  <div class="content">3 / 2</div>
  <!--</div>		<div class="table-cell">-->
  <div class="content">3 / 3</div>
  <!--</div>	</div>-->
</div>

<hr>

<p>cleaned up html </p>
<div class="grid c3 shrink">

  <div class="content">1 / 1</div>
  <div class="content">1 / 2</div>
  <div class="content">1 / 3</div>

  <div class="content">2 / 1</div>
  <div class="content">very long content <br /> with line break and all the stuff</div>
  <div class="content">2 / 3</div>

  <div class="content">Another very long <br /> line <br /> breaking <br /> content and ither <span>html tags</span></div>
  <div class="content">3 / 2</div>
  <div class="content">3 / 3</div>
</div>