我有一张 table ,里面有 5 <tr>
元素,在我的 1920x1080 屏幕上看起来不错,但在较低分辨率下看起来真的很糟糕。
代码如下:
<table class="table fullwidth nextevent_table">
<tbody>
<tr class="row1 open">
<td valign="middle" align="center" width="44">
<a href="/index.php/Calendar/Calendarevent/1.html?">
<img src="/icons/events/35.png" style="max-height: 40px;" alt="eventicon3" class="eventicon eventicon">
</a>
</td>
<tr class="row1 open">
<td valign="middle" align="center" width="44">
<a href="/index.php/Calendar/Calendarevent/2.html?">
<img src="/icons/events/35.png" style="max-height: 40px;" alt="eventicon3" class="eventicon eventicon">
</a>
</td>
<tr class="row1 open">
<td valign="middle" align="center" width="44">
<a href="/index.php/Calendar/Calendarevent/3.html?">
<img src="/icons/events/35.png" style="max-height: 40px;" alt="eventicon3" class="eventicon eventicon">
</a>
</td>
<tr class="row1 open">
<td valign="middle" align="center" width="44">
<a href="/index.php/Calendar/Calendarevent/4.html?">
<img src="/icons/events/35.png" style="max-height: 40px;" alt="eventicon3" class="eventicon eventicon">
</a>
</td>
<tr class="row1 open">
<td valign="middle" align="center" width="44">
<a href="/index.php/Calendar/Calendarevent/5.html?">
<img src="/icons/events/35.png" style="max-height: 40px;" alt="eventicon3" class="eventicon eventicon">
</a>
</td>
</tbody>
</table>
例如,可以使用 PHP 或 javascript:
如果用户的屏幕分辨率为 1440x900,则隐藏最后一个 <tr>
如果用户的屏幕分辨率为 1280x1024,则隐藏最后 2 个 <tr>
谢谢!
最佳答案
您可以使用 CSS 媒体查询来实现此目的:
@media (max-width: 1440px) {
.nextevent_table tr:last-child {
display: none;
}
}
@media (max-width: 1280px) {
.nextevent_table tr:nth-last-of-type(-n+2) {
display: none;
}
}
关于javascript - 如果客户端分辨率较低,如何隐藏一些 html 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35928984/