.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>
我想匹配高度未知的 table 中最高的 table ,但我该怎么做?
在 div 的情况下,“align-items:stretch;”没有问题
我尝试了“align-items:stretch;”,但高度没有改变。
如果可能的话,我想在不改变高度的情况下将“th”的高度延长“td”,但我必须使用 JavaScript 吗?
最佳答案
由于 Flexbox 是 CSS 的最新版本之一,而 Table 是最古老的版本之一,它们不能很好地协同工作,这主要不是因为年龄差异,而是因为 Table 元素规范。 (以及跨浏览器的不一致行为)提供了足够的解释空间。
在这种情况下,添加一个包装器并给出 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>
关于css - Flexbox 中的表格高度不拉伸(stretch),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46742296/