.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;”,但高度并没有改变。 如果可能的话,我想在不改变高度的情况下将“th”的高度扩展为“td”,但我是否必须使用JavaScript?
答案 0 :(得分:0)
td {height: 500px;}
您可以为所有表使用固定高度。
答案 1 :(得分:0)
dict
.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;
}
答案 2 :(得分:0)
由于Flexbox是CSS的最新版本之一,而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;
}
&#13;
<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>
&#13;