html - 并排<td>元素具有相同的高度

我有点困在CSS相关的东西上。我有一个包含两个td元素的表，每个td元素中都有一个带有fieldset的表。
我希望每个td中的每个场都有相同的高度。
当我运行它时，虽然我看到每个字段集的高度取决于每个表中的数据。我可以看到每个td的高度都和我预期的一样，尽管100%的高度似乎仍然不起作用。

p,
table,
fieldset {
  margin: 0px;
  padding: 0px;
}
p {
  font-family: "Source Code Pro";
  color: #FFFFFF;
}
table td {
  background-color: #333333;
}
table td td {
  background-color: #666666;
  height: 100%;
}
fieldset {
  border: solid 1px #fcff00;
  height: 100%;
  margin: 4px;
  padding: 4px;
}
fieldset table {
  height: 100%;
}

<table>
  <tr>
    <td valign="top">
      <!-- LEFT HAND SIDE -->
      <fieldset>
        <table>
          <tr>
            <td>
              <p>Line 01</p>
            </td>
          </tr>
          <tr>
            <td>
              <p>Line 02</p>
            </td>
          </tr>
          <tr>
            <td>
              <p>Line 03</p>
            </td>
          </tr>
        </table>
      </fieldset>
    </td>
    <td valign="top">
      <!-- RIGHT HAND SIDE -->
      <fieldset>
        <table>
          <tr>
            <td>
              <p>Line 04</p>
            </td>
          </tr>
        </table>
      </fieldset>
    </td>
  </tr>
</table>

最佳答案

您可以使用position tricks+pseudo元素来执行此操作，而无需更改任何标记。

table, fieldset, p {
  margin: 0;
  padding: 0;
  border: 0;
}
p {
  font-family: "Source Code Pro";
  color: #fff;
}
table td {
  position: relative;
  background: #333;
  padding: 8px;
}
table td:after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: 4px; bottom: 4px;
  border: solid 1px #fcff00;
}
table table td {
  background: #666;
  padding: 0;
}
table table td:after {
  display: none;
}
fieldset {
  position: relative;
  z-index: 1;
}

jsFiddle

table, fieldset, p {
  margin: 0;
  padding: 0;
  border: 0;
}
p {
  font-family: "Source Code Pro";
  color: #fff;
}
table td {
  position: relative;
  background: #333;
  padding: 8px;
}
table td:after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: 4px; bottom: 4px;
  border: solid 1px #fcff00;
}
table table td {
  background: #666;
  padding: 0;
}
table table td:after {
  display: none;
}
fieldset {
  position: relative;
  z-index: 1;
}

<table>
  <tr>
    <td valign="top">
      <!-- LEFT HAND SIDE -->
      <fieldset>
        <table>
          <tr>
            <td>
              <p>Line 01</p>
            </td>
          </tr>
          <tr>
            <td>
              <p>Line 02</p>
            </td>
          </tr>
          <tr>
            <td>
              <p>Line 03</p>
            </td>
          </tr>
        </table>
      </fieldset>
    </td>
    <td valign="top">
      <!-- RIGHT HAND SIDE -->
      <fieldset>
        <table>
          <tr>
            <td>
              <p>Line 04</p>
            </td>
          </tr>
        </table>
      </fieldset>
    </td>
  </tr>
</table>

也可以使用CSS3flexbox而不是表布局。
jsFiddle

.container {
  display: inline-flex;
}
.container .item {
  outline: 4px solid #333; /*outer*/
  border: solid 1px #fcff00; /*inner*/
  background: #333;
  padding: 4px;
  margin: 5px;
}
.container .item p {
  background: #666;
  color: #fff;
  margin: 4px 0 0;
}
.container .item p:first-child {
  margin-top: 0;
}

<div class="container">
  <div class="item">
    <p>Line 01</p>
    <p>Line 02</p>
    <p>Line 03</p>
  </div>
  <div class="item">
    <p>Line 04</p>
  </div>
</div>

关于html - 并排<td>元素具有相同的高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35990632/