Question

我有两个不同行数的浮动表（参见 JSFiddle）。

我希望这两个表具有相同高度，而不将高度明确设置为，例如400px。我尝试将它们放在一个高度为100％的div容器中，如this问题的答案所示，但这只会导致表格不再水平对齐。

有没有办法只使用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不同。

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

这可以防止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

一种相当简单而强大的方法是通过定义父容器.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。在这种情况下，我会原谅额外的标记来获得你需要的设计。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

请尝试以下操作： Demo

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

使两个浮动表具有相同的高度

4 个答案: