使两个浮动表高度相同

Question

我有两个行数不同的浮动表（请参阅 JSFiddle).

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

有没有办法仅使用 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

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

The min-height property is used to set the minimum height of an element.

This prevents the value of the height property from becoming smaller than min-height.

查看更新Fiddle

Answer 2

在页面加载时使用 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 3

这样试试：Demo

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

Answer 4

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

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

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

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

的 70%

然后将嵌套 table 的高度设置为 100%，两个 table 将缩放到相同的高度。请记住将嵌套 table 的宽度设置为 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>

使两个浮动表高度相同

Make two floating tables the same height

html

css

css-tables