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

Question

我有点卡在 CSS 相关的问题上。我有一个 table 有两个 td 元素，每个 td 元素是一个 table 和一个字段集。

我希望每个 td 中的每个字段集都具有相同的高度。

当我运行虽然我看到每个字段集的高度都不同，具体取决于每个 table 中的数据。我可以看到每个 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>

Answer 1

您必须从 height: 100% 更改为 height: inherit;。百分比仅在声明 parent 的高度时有效。

Answer 2

右手边

<td rowspan="3">

我觉得可以我已经有这个问题了

Answer 3

您也可以将最小高度设置为 CSS。所以它会响应。

Answer 4

你可以使用位置技巧+伪元素来做到这一点，而无需任何标记更改。

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>

您也可以使用 CSS3 flexbox 而不是 table 布局。

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>

Answer 5

我似乎找到了一个非常简单的结果，不需要 Flex Box 或 JavaScript。

我所要做的就是将 height="1" 放在必要的 td 元素上，100% 高度就起作用了。

<td valign="top" height="1"><!-- LEFT HAND SIDE -->
    <fieldset>
    </fieldset>
</td>

<td valign="top" height="1"><!-- RIGHT HAND SIDE -->
    <fieldset>
    </fieldset>
</td>

https://jsfiddle.net/katpmLe8/

我不知道为什么会这样，但感觉比学习一门我不懂的新技术要简单

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

Side by side <td> elements to have the same height

html

css

html-table

css-tables