使用 CSS 隐藏表中的列

Question

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

\n\n

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

\n

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/