如何使用CSS隐藏HTML表格列？

Question

我得到动态生成的HTML代码， 1。

<table>
    <tr>
        <td class="title">Title</td>
        <td class="name">Name</td>
    </tr>
    <tr>
        <td>Mr</td>
        <td>John</td>
    </tr>
    <tr>
        <td>Mr</td>
        <td>Smith</td>
    </tr>
</table>

使用此代码我想隐藏＆＃34;标题＆＃34;当屏幕尺寸480，是否可能。如果我喜欢以下代码，我可以很容易地做到，

<table>
    <tr>
        <td class="title">Title</td>
        <td class="name">Name</td>
    </tr>
    <tr>
        <td class="title">Mr</td>
        <td class="name">John</td>
    </tr>
    <tr>
        <td class="title">Mr</td>
        <td class="name">Smith</td>
    </tr>
</table>

@media (max-width: 480px) {
        .title{
            display: none;
        }
}

但代码顶部（1）仅在第一行有类名。那时如何使用第一行类名隐藏完整列。

Answer 1

您无法直接根据其中包含.title的列来选择列。如果标题行始终排在第一位，您可以在媒体查询中使用选择器table tr:first-child。