css - 使用 CSS 隐藏表格中的列

Question

我想隐藏下表中的某些列。它来自 wordpress 插件，因此 id 和类是预定义的。我希望我可以用 css fx: display:none 解决它，但我似乎无法让它工作。

<table cellspacing="0" class="wp-list-table widefat fixed brugere">
    <thead>
        <tr>
            <th class="manage-column column-company_name sortable asc" id="company_name" scope="col" style="">
                <a href="http://xxx.xxx.dk/xxx/?orderby=company_name&amp;order=desc"><span>Virksomhed</span><span class="sorting-indicator"></span></a>
            </th>
            <th class="manage-column column-CVR._Nr." id="CVR._Nr." scope="col" style="">CVR. Nr.</th>
            <th class="manage-column column-arbejdsområde" id="arbejdsområde" scope="col" style="">Arbejdsområde</th>
            <th class="manage-column column-fagområde" id="fagområde" scope="col" style="">Fagområde</th>
            <th class="manage-column column-address_zipcode sortable asc" id="address_zipcode" scope="col" style="">
                <a href="http://xxx.xxx.dk/xxx/?orderby=address_zipcode&amp;order=desc"><span>Postnummer</span><span class="sorting-indicator"></span></a>
            </th>
            <th class="manage-column column-address_city sortable asc" id="address_city" scope="col" style="">
                <a href="http://xxx.xxx.dk/xxx/?orderby=address_city&amp;order=desc"><span>By</span><span class="sorting-indicator"></span></a>
            </th>
            <th class="manage-column column-tlf._nr." id="tlf._nr." scope="col" style="">Tlf. Nr.</th>
            <th class="manage-column column-email sortable asc" id="email" scope="col" style="">
                <a href="http://xxx.xxx.dk/xxx/?orderby=email&amp;order=desc"><span>Email</span><span class="sorting-indicator"></span></a>
            </th>
            <th class="manage-column column-view" id="view" scope="col" style="">Se mere</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th class="manage-column column-company_name sortable asc" scope="col" style="">
                <a href="http://xxx.xxx.dk/xxx/?orderby=company_name&amp;order=desc"><span>Virksomhed</span><span class="sorting-indicator"></span></a>
            </th>
            <th class="manage-column column-CVR._Nr." scope="col" style="">CVR. Nr.</th>
            <th class="manage-column column-arbejdsområde" scope="col" style="">Arbejdsområde</th>
            <th class="manage-column column-fagområde" scope="col" style="">Fagområde</th>
            <th class="manage-column column-address_zipcode sortable asc" scope="col" style="">
                <a href="http://xxx.xxx.dk/xxx/haandvaerkerliste/?orderby=address_zipcode&amp;order=desc"><span>Postnummer</span><span class="sorting-indicator"></span></a>
            </th>
            <th class="manage-column column-address_city sortable asc" scope="col" style="">
                <a href="http://xxx.xxx.dk/xxx/?orderby=address_city&amp;order=desc"><span>By</span><span class="sorting-indicator"></span></a>
            </th>
            <th class="manage-column column-tlf._nr." scope="col" style="">Tlf. Nr.</th>
            <th class="manage-column column-email sortable asc" scope="col" style="">
                <a href="http://xxx.xxx.dk/xxx/?orderby=email&amp;order=desc"><span>Email</span><span class="sorting-indicator"></span></a>
            </th>
            <th class="manage-column column-view" scope="col" style="">Se mere</th>
        </tr>
    </tfoot>
    <tbody class="list:bruger" id="the-list">
        <tr class="alternate">
            <td class="company_name column-company_name">DHV</td>
            <td class="CVR._Nr. column-CVR._Nr.">20891940</td>
            <td class="arbejdsområde column-arbejdsområde">Bornholm, Lolland og Falster, Nordsjælland</td>
            <td class="fagområde column-fagområde">Gardin, Gulve, fremstilling</td>
            <td class="address_zipcode column-address_zipcode">2300</td>
            <td class="address_city column-address_city">Kbh S</td>
            <td class="tlf._nr. column-tlf._nr."></td>
            <td class="email column-email">test@hotmail.com</td>
            <td class="view column-view">
                <a href="http://xxx.xxx.dk/xxxside/?member_id=xx" target="_blank">Klik her</a>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

您可以使用 CSS 中的 nth-child 选择器来隐藏您需要的列。但在那种情况下，您也需要隐藏相同的内容。

CSS:

table tr th:nth-child(1), table tr td:nth-child(1){
 display:none;// It will hide the first column of the table
}

同时检查此以更好地理解 https://css-tricks.com/how-nth-child-works/