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

Question

我在CSS方面遇到了一些困难。我有一个包含两个td元素的表格，每个td元素中都有一个带有fieldset的表格。

我希望每个td中的每个fieldset具有相同的高度。

但是当我运行它时，我发现每个fieldset的高度都不同，这取决于每个表格内的数据。我可以看到每个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>

- TheLovelySausage

---

2016年使用表格进行布局？ - undefined

有时候需要使用表格，而现在就是其中之一的时候。 - undefined

时间和地点是在显示表格数据时，如果你的表格中有嵌套的表格，那很可能是你没有正确使用它的迹象（除非你正在显示分组数据）。 - undefined

你有试过将边框放在<td>而不是<fieldset>中吗？ - undefined

我尝试给td添加边框，这个方法有效，但是我无法在有边框的情况下使用legend。 - undefined

Answer 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;
}

This text is already in Chinese. It says: "

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的弹性盒子布局，而不是表格布局。

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>

- Stickers

Answer 2

右边

<td rowspan="3">

我觉得可以解决这个问题 我已经遇到过这个问题了

- CodeWeis

Answer 3

看起来我找到了一个非常简单的结果，不需要使用Flex Box或JavaScript。

我所要做的就是在必要的td元素上添加height="1"，然后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/

我不知道为什么它能运行，但是它感觉比学习一个我不理解的新技术要简单。

- TheLovelySausage

---

看起来所有的项目都被拉伸了，在Firefox上一团糟。 - undefined

它可能会看起来很糟糕一段时间，但我没有花时间美化它，而且它在node-webkit内置的浏览器引擎上运行，那里看起来很好。 - undefined

好的，我刚刚找到了一种更好的方法来使用您现有的标记进行操作，更新了答案，希望能帮到您。 - undefined

Answer 4

您需要将height: 100%更改为height: inherit;。百分比只在父元素的高度已声明时有效。

- silviagreen

Answer 5

你还可以使用CSS设置min-height。这样它也会具有响应能力。

- Argiris A