Question

我知道这种“将子div扩展到父级高度”的东西很老，今天我们可以用flexbox和grid解决问题。但是我的问题有点不同。我需要具有动态宽度值的表格的格式，具体取决于其中的内容。因此，每一行都应根据那里的内容确定它的高度，每一列的宽度。列数和行数也是可变的。

这就是为什么我不能使用基于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>

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

2 个答案: