Javascript 如果客户端分辨率较低，如何隐藏一些html元素？

我有一个包含5个

元素的表，它在我的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屏幕，则隐藏最后一个

如果用户有1280x1024屏幕，则隐藏最后两个

---

谢谢

您可以使用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;
    }
}

---

仅供参考，您的HTML无效；您缺少所有的

标记。您可以使用媒体查询根据分辨率隐藏

tr

。比JS更简单、更可靠。看这个例子：像个魔术师一样工作！！非常感谢你！