无法使用媒体查询降低表高
无法使用媒体查询降低表高
提问于 2022-05-11 14:15:32
我有一个高度=100 be的表，一个高20 be的td，以及两个tdd宽度= 50% (每个40 be)的表，我想在移动屏幕上将高度降低到80 be，对20 be没有变化，并希望降低50%的高度tds。
我为移动屏幕添加了一个媒体查询，将表的高度更改为80‘t，但没有改变。但是当我增加高度(比如说140 it )时，它就会工作，而高度也会发生变化。因此，降低桌子高度不会改变任何事情，增加它会改变什么，为什么会发生这种情况，我如何解决这个问题呢？
代码：
@media screen and (max-width: 375px) {
table {
height: 80px !important;
}
}
<table
align="center"
border="0"
cellpadding="0"
cellspacing="0"
style="margin: 0; padding: 0; border-collapse: collapse; height: 100px"
width="100%"
>
<tr>
<td align="center" valign="top">
<table
width="600"
border="0"
cellspacing="0"
cellpadding="0"
style="border-collapse: collapse"
>
<tr>
<td
align="center"
valign="top"
style="line-height: 40px"
height="50%"
>
</td>
</tr>
<tr>
<td
align="center"
valign="top"
style="background-position: top center; background-size: cover"
>
<img
src="..."
alt="..."
border="0"
style="display: block; padding: 0; margin: 0"
align="center"
height="20"
text-align="center"
/>
</td>
</tr>
<tr>
<td
align="center"
valign="top"
style="line-height: 40px"
height="50%"
>
</td>
</tr>
</table>
</td>
</tr>
</table>回答 2
Stack Overflow用户
发布于 2022-05-11 14:46:34
表格单元格根据其内容进行调整。其中两个细胞的线高为40 of。如果你想让它们变得不那么高的话，你也需要减少这一点。
Stack Overflow用户
发布于 2022-05-11 14:49:08
包装内a，并将高度样式应用于此。如果不希望内容溢出父级的高度，请添加“溢出”属性。
<div style="height:80px;overflow:auto;">
<table>.....</table>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72202660
复制相关文章
相似问题
腾讯云开发者
