Question

我有一张动态填充的表格。每个<td>都可以包含一个或多个<div class="status">。根据成功或失败，这些状态div显示为绿色或红色。

我希望这些div完全填充父<td>。最初，我使用height: 100%;，但如果有多个div，那么这不好。但是，如果我删除高度选择器，只有一个<div>的条目是微不足道的。如下图所示。

如何确保只有一个<td>的单个<div>条目完全填满？

总之，<div class="status">的总和应该填充父<td>。谢谢！

Answer 1

这样的东西？

tr {
  display: flex;
}
td {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.successDiv, .failureDiv {
  display: flex;
  align-items: center;
  flex: 1;
}
.successDiv {
  background-color: green;
}

.failureDiv {
  background-color: red;
}

<table>
  <tr>
      <td>
          <div class="successDiv">
            Success
          </div>
      </td>
      <td>
          <div class="successDiv">
            Success
          </div>
          <div class="failureDiv">
            Failure
          </div>
      </td>
  </tr>
</table>

<强>拨弄

https://jsfiddle.net/Hastig/qwseoypx/1/

Answer 2

.fill {
  width: 100%;
  height: 100%;
  display: inline-block;
  padding: 0;
  margin: 0;
}
.green {
  background-color: green;
}
.red {
  background-color: red;
}
table {
  border-collapse: collapse;
}
td {
  border: solid 2px black;
  padding: 0;
  width: 33%;
}

<table>
  <tbody>
    <tr>
      <td>
        <div class="fill green">
          <p>Bacon ipsum dolor amet ball tip landjaeger pancetta cupim, ground round leberkas pastrami. Tongue strip steak biltong, chicken bresaola rump swine tail venison landjaeger ball tip tri-tip. Alcatra turkey ball tip cupim, beef ribs hamburger flank
            landjaeger ham hock venison tongue biltong. Corned beef frankfurter ham hock ball tip leberkas tenderloin picanha kevin. Jerky sausage strip steak jowl shankle pork belly. Pig alcatra beef ribs shankle jerky, flank tail landjaeger sirloin
            andouille bacon cow.</p>
        </div>
      </td>
      <td>
        <div class="fill red">
          <p>Ham hock capicola short ribs, bacon picanha pancetta alcatra kielbasa turducken kevin leberkas short loin shank shoulder.</p>
        </div>
      </td>
      <td>
        <div class="fill red">
          <p>Meatloaf tenderloin chuck rump short ribs, ball tip biltong tri-tip picanha fatback. Short ribs sirloin frankfurter swine landjaeger flank t-bone pastrami strip steak. Pancetta cupim shank turducken, picanha rump frankfurter bacon.</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>

这适用于您最初说过的内容。
注意：这非常粗糙，但它可以通过一些CSS调整来满足您的需求。
希望它有所帮助！

一个或多个<div>标签填充父级

2 个答案: