使两个浮动表高度相同

Question

我有两个行数不同的浮动表（请参阅 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

一种相当简单且可靠的方法是通过定义父容器.wrap 和两个单元格杠杆包装器.cell-wrap 将两个表包装到一个CSS 表中。

.wrap 具有 display: table 和 100% 的宽度，这为您提供了屏幕（或父块）的整个宽度。

每个.cell-wrap 都有display: table-cell，这会强制这两个元素具有相同的高度，您还需要将高度设置为100% 才能工作，以及vertical-align: top（或类似的）。

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

然后将嵌套表格的高度设置为 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>

Answer 2

你可以使用min-height，它和height不一样。

min-height 属性用于设置最小高度 元素。

这样可以防止 height 属性的值变小 比最小高度。

查看更新的Fiddle

Answer 3

在页面加载时使用 jQuery

jQuery(window).load(function (){
    var height = 0;
    jQuery(".right, .left").each(function(){
        height = jQuery(this).height() > height ? jQuery(this).height() : height;
    }).height(height);
});

Answer 4

试试这样：Demo

html,body,table
{
    height: 100%;   
    max-height:260px; / *optional & if needed, use it only for table*/
}