html - 使两个 float 表高度相同

Question

我有两个行数不同的 float 表(请参阅 JSFiddle ).

我希望这两个表具有相同的高度，而不是将高度明确设置为例如 400 像素。我尝试按照 this 的回答中的建议将它们放入高度为 100% 的 div 容器中问题，但这只会导致表格不再水平对齐。

有没有办法只使用 HTML 和 CSS 来实现这一点？

这是表格的 HTML 代码:

<table class="left">
    <tr>
        <th>Row1</th>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>        
    </tr>
        <tr>
        <th>Row2</th>
        <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>        
    </tr>
        <tr>
        <th>Row3</th>
        <td>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </td>
        </tr>
    <tr>
        <th>Row4</th>
        <td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td>      
    </tr>
</table>

<table class="right">
    <tr>
        <th>1</th>
        <td>Monday</td>     
    </tr>
    <tr>
        <th>2</th>
        <td>Tuesday</td>        
    </tr>
    <tr>
        <th>3</th>
        <td>Wednesday</td>      
    </tr>
    <tr>
        <th>4</th>
        <td>Thursday</td>
    </tr>
        <tr>
        <th>5</th>
    <td>Friday</td>     
    </tr>
    <tr>
        <th>6</th>
        <td>Saturday</td>       
    </tr>
    <tr>
        <th>7</th>
        <td>Sunday</td>     
    </tr>
</table>

使用以下 CSS:

table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td, th {
    border: 1px solid darkgrey;
    text-align: left;
    padding: 0.4em;
}

table.left {
    width: 70%;
    height: 400px;
    float: left;
}

table.right {
    width: 25%;
    height: 400px;
    float: right;
}

Answer 1

一个相当简单和健壮的方法是通过定义一个父容器将你的两个表包装到一个 CSS 表中 .wrap和两个细胞杠杆 wrapper .cell-wrap .

.wrap有display: table和宽度 100%，这为您提供了屏幕(或父 block )的整个宽度。

每个.cell-wrap有display: table-cell这迫使这两个元素具有相同的高度，您还需要将高度设置为 100% 才能正常工作，并且 vertical-align: top (或类似的)。

要获得所需的宽度，只需设置 .cell-wrap 之一的宽度即可元素到某个值，例如左侧的 70% .cell-wrap .

然后您将嵌套表格的高度设置为 100%，这两个表格将缩放到相同的高度。请记住将嵌套表格的宽度设置为 100%，否则它们将采用收缩至适合的值。

虽然它需要额外的标记，但它易于理解、健壮并且不需要 JavaScript。在这种情况下，我会原谅额外的标记以获得您需要的设计。

.wrap {
  display: table;
  width: 100%;
  height: 100%; /* need to set height for this to work in Chrome */
}
.cell-wrap {
  display: table-cell;
  vertical-align: top;
  height: 100%;
}
.cell-wrap.left {
  width: 70%;
  padding-right: 10px;  /* if you need some whitespace */
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  height: 100%;
  width: 100%;
}
table td, table th {
  border: 1px solid darkgrey;
  text-align: left;
  padding: 0.4em;
}

<div class="wrap">
  <div class="cell-wrap left">
    <table class="left">
      <tr>
        <th>Row1</th>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
      </tr>
      <tr>
        <th>Row2</th>
        <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
      </tr>
      <tr>
        <th>Row3</th>
        <td>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</td>
      </tr>
      <tr>
        <th>Row4</th>
        <td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td>
      </tr>
    </table>
  </div>
  <div class="cell-wrap right">
    <table class="right">
      <tr>
        <th>1</th>
        <td>Monday</td>
      </tr>
      <tr>
        <th>2</th>
        <td>Tuesday</td>
      </tr>
      <tr>
        <th>3</th>
        <td>Wednesday</td>
      </tr>
      <tr>
        <th>4</th>
        <td>Thursday</td>
      </tr>
      <tr>
        <th>5</th>
        <td>Friday</td>
      </tr>
      <tr>
        <th>6</th>
        <td>Saturday</td>
      </tr>
      <tr>
        <th>7</th>
        <td>Sunday</td>
      </tr>
    </table>
  </div>
</div>