将字段集高度调整为td

Question

我有以下代码：

 <table>
    <tbody>
        <tr>
            <td>
                <fieldset>
                    row1
                    <br/>
                    row2
                    <br/>
                    row3
                </fieldset>
            </td>
            <td>
                <fieldset>
                    row1
                </fieldset>
            </td>
            <td>
                <fieldset>
                    row1
                    <br/>
                    row2
                </fieldset>
            </td>
            <td>
                <fieldset>
                </fieldset>
            </td>
        </tr>
    </tbody>
 </table>

这就是我得到的：

我想要的是所有的场集都根据最大的场集得到相同的高度。我用css尝试了不同的方法，但我找不到解决方案。

Answer 1

您可以使用Flexbox来获得所需的结果。

＆＃13;

＆＃13;

td, tr, fieldset {
  display: flex;
}
fieldset {
  align-items: center;
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td>
        <fieldset>
          row1
          <br/> row2
          <br/> row3
        </fieldset>
      </td>
      <td>
        <fieldset>
          row1
        </fieldset>
      </td>
      <td>
        <fieldset>
          row1
          <br/> row2
        </fieldset>
      </td>
      <td>
        <fieldset>
        </fieldset>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

如果不需要表格，您可以将HTML结构更改为此类内容。

＆＃13;

＆＃13;

.el,
.el > div,
fieldset {
  display: flex;
}
fieldset {
  align-items: center;
}

＆＃13;

<div class="el">
  <div>
    <fieldset>
      row1
      <br/>row2
      <br/>row3
    </fieldset>
  </div>
  <div>
    <fieldset>
      row1
    </fieldset>
  </div>
  <div>
    <fieldset>
      row1
      <br/>row2
    </fieldset>
  </div>
  <div>
    <fieldset>
    </fieldset>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以保留适合此处的表格结构。 （flexboxes也是一个很好的解决方案）

你的行中的tds具有相同的高度，它只是不会扩展的字段集。

＆＃13;

＆＃13;

td {
  vertical-align: top;
  border: 1px solid gray;
}

fieldset {
  border: none;
}

＆＃13;

<table>
    <tbody>
        <tr>
            <td>
                <fieldset>
                    row1
                    <br/>
                    row2
                    <br/>
                    row3
                </fieldset>
            </td>
            <td>
                <fieldset>
                    row1
                </fieldset>
            </td>
            <td>
                <fieldset>
                    row1
                    <br/>
                    row2
                </fieldset>
            </td>
            <td>
                <fieldset>
                </fieldset>
            </td>
        </tr>
    </tbody>
 </table>

＆＃13;

＆＃13;

＆＃13;

这里有一些基本的造型。