使<div>标签填充父级

Question

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

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

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

以下是一个代码片段，演示了我的观点：

＆＃13;

＆＃13;

table, th, td {
  border: 1px solid black;
}

.successDiv {
  background-color: green;
}

.failureDiv {
  background-color: red;
}

＆＃13;

<table>
  <thead>
    <tr>
    <td>
      Components
    </td>
      <td>
        Step 1
      </td>
      <td>
        Step 2
      </td>
      <td>
        Step 3
      </td>
    </tr>
  </thead>
  <tr>
    <td>
      Name
    </td>
      <td>
          <div class="successDiv">
            Success
          </div>
      </td>
      <td>
          <div class="successDiv">
            Success
          </div>
          <div class="failureDiv">
            Failure
          </div>
      </td>
    <td>
          <div class="successDiv">
            Success
          </div>
          <div class="failureDiv">
            Failure
          </div>
          <div class="failureDiv">
            Failure
          </div>
      </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

在此片段中，单个绿色成功div应填充其父td。这不应该影响每行中的thead或第一个td;那些是标题。

Answer 1

您可以像这样使用:only-child。

＆＃13;

＆＃13;

table, th, td {
  border: 1px solid black;
}

.successDiv {
  background-color: green;
}

.failureDiv {
  background-color: red;
}

.successDiv, .failureDiv {
   height: 30px;
 }

.successDiv:only-child, .failureDiv:only-child {
   height: 60px;
}

＆＃13;

<table>
  <thead>
    <tr>
    <td>
      Components
    </td>
      <td>
        Step 1
      </td>
      <td>
        Step 2
      </td>
    </tr>
  </thead>
  <tr>
    <td>
      Name
    </td>
      <td>
          <div class="successDiv">
            Success
          </div>
      </td>
      <td>
          <div class="successDiv">
            Success
          </div>
          <div class="failureDiv">
            Failure
          </div>
      </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

table,th,td {
  border: 1px solid black;
  position: relative;
  height: 100%;
}
.successDiv {
  background-color: green;
}
.failureDiv {
  background-color: red;
}
.successDiv:only-child,
.failureDiv:only-child {
  position: relative;
  height: 100%;
}

＆＃13;

<table>
  <thead>
    <tr>
      <td>
        Components
      </td>
      <td>
        Step 1
      </td>
      <td>
        Step 2
      </td>
    </tr>
  </thead>
  <tr>
    <td>
      Name
    </td>
    <td>
      <div class="successDiv">
        Success
      </div>
    </td>
    <td>
      <div class="successDiv">
        Success
      </div>
      <div class="failureDiv">
        Failure
      </div>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;