檯面高度不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>