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

【问题标题】：Side by side <td> elements to have the same height并排 <td> 元素具有相同的高度
【发布时间】：2016-06-29 16:10:31
【问题描述】：

我有点卡在与 CSS 相关的东西上。我有一个包含两个 td 元素的表，每个 td 元素中都有一个带有字段集的表。

我希望每个 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>

【问题讨论】：

2016 年布局表？
餐桌有时间和地点，这是其中之一
时间和地点是显示表格数据的时候，如果表中有表，那可能是你没有正确使用它的标志（除非你显示的是分组数据）
这是示例代码，真正的结果是以表格格式保存输入字段及其描述。
你试过把边框放在中，而不是字段集中吗？

标签： html css html-table css-tables

【解决方案1】：

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

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 代替表格布局。

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>

【讨论】：

【解决方案2】：

似乎我发现了一个非常简单的结果，不需要 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/

我不知道它为什么有效，但感觉比学习一项我不懂的新技术要简单

【讨论】：

似乎所有项目都被拉伸了，在火狐上是一团糟。
它可能会看起来很糟糕，但我没有花任何时间让它变得漂亮，除了它在浏览器引擎内置的 node-webkit 上运行并且在那里看起来很好
好的，我刚刚找到了一种使用现有标记的更好方法，更新了答案，希望对您有所帮助。

【解决方案3】：

您也可以使用 CSS 设置 min-height。所以它也会响应。

【讨论】：

【解决方案4】：

右手边

<td rowspan="3">

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

【讨论】：

【解决方案5】：

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

【讨论】：