Question

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

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

当我运行它时，虽然我看到每个字段集的高度不同，具体取决于每个表中的数据。我可以看到每个td与我预期的高度相同，尽管100％的高度似乎仍然不起作用。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

<强> 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>

Answer 2

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

Answer 3

右手边

<td rowspan="3">

我认为可以做到我已经解决了这个问题

Answer 4

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

Answer 5

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

我所要做的就是把高度=＆＃34; 1＆＃34;在必要的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/

我不知道它为什么会起作用，但感觉比学习我不理解的新技术更简单

并排元素具有相同的高度

5 个答案: