台面高度不Flexbox的

Question

.flex { 
 
    display: flex; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    justify-content: space-between; 
 
} 
 

 
table { 
 
    width: 48%; 
 
    border-collapse: collapse; 
 
} 
 
th, td { 
 
    border: 1px solid gray; 
 
    padding: 5px; 
 
}

<div class="flex"> 
 
    <table> 
 
    <tbody> 
 
    <tr> 
 
     <th>1st Table</th> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <p> 
 
     I want to be <br> 
 
     the same height<br> 
 
     as the next table 
 
     </p> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 

 
    <table> 
 
    <tbody> 
 
    <tr> 
 
     <th>2nd Table</th> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <p> 
 
     This text has 4 lines<br> 
 
     This text has 4 lines<br> 
 
     This text has 4 lines<br> 
 
     This text has 4 lines 
 
     </p> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

舒展

我想，以配合无名高地表中最高的表，但我该怎么办呢？

在div的情况下，“align-items：stretch”没有问题。

我试过“align-items：stretch;”，但高度并没有改变。 如果可能的话，我想通过“td”扩展“th”的高度而不改变它的高度，但是我必须使用JavaScript吗？

Answer 1

由于Flexbox的是最新版本之一，CSS和表是最古老的一个，他们不会玩相处在一起，而不是主要的，因为年龄的差异，但表元素规格。 （以及跨浏览器的不一致行为）给出了充足的解释空间。

在这种情况下，添加一个包装并给table一个高度。

.flex { 
 
    display: flex; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    justify-content: space-between; 
 
} 
 

 
.flex > div { 
 
    width: 48%;       /* added */ 
 
} 
 

 
table { 
 
    height: 100%;      /* added */ 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    height: 100%;      /* added */ 
 
} 
 

 
th, td { 
 
    border: 1px solid gray; 
 
    padding: 5px; 
 
}

<div class="flex"> 
 
    <div> 
 
    <table> 
 
     <tbody> 
 
     <tr> 
 
      <th>1st Table</th> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <p> 
 
       I want to be <br> the same height<br> as the next table 
 
      </p> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
    <div> 
 
    <table> 
 
     <tbody> 
 
     <tr> 
 
      <th>2nd Table</th> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <p> 
 
       This text has 4 lines<br> This text has 4 lines<br> This text has 4 lines<br> This text has 4 lines 
 
      </p> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

Answer 2

td {height: 500px;}您可以对所有表格使用固定高度。

Answer 3

.flex { 
 
    display: flex; 
 
    width: 90%; 
 
    margin: 0 auto; 
 
    justify-content: space-between; 
 
} 
 

 
table { 
 
    width: 48%; 
 
    border-collapse: collapse; 
 
} 
 
th, td { 
 
    border: 1px solid gray; 
 
    padding: 5px; 
 
} 
 
td { 
 
    height: 150px; 
 
}

<div class="flex"> 
 
    <table> 
 
    <tbody> 
 
    <tr> 
 
     <th>1st Table</th> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <p> 
 
     I want to be <br> 
 
     the same height<br> 
 
     as the next table 
 
     </p> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 

 
    <table> 
 
    <tbody> 
 
    <tr> 
 
     <th>2nd Table</th> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     <p> 
 
     This text has 4 lines<br> 
 
     This text has 4 lines<br> 
 
     This text has 4 lines<br> 
 
     This text has 4 lines 
 
     </p> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 
</div>