使用CSS隐藏表中的列

我想隐藏下表中的一些列。它来自wordpress插件，所以ID和类是预定义的。我希望我可以用css fx解决它：display：none，但我似乎无法使它工作。使用CSS隐藏表中的列

<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">[email protected]</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>

来源

2016-12-19 Camilla Bannebjerre Nielsen

所以，你要基于一个ID我要隐藏列n''？ – Terry

是的，这是正确的 –

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

来源

2016-12-19 10:58:35 Taniya

PLUS 1正确解释问题，即使它缺乏清晰度。 –

这似乎工作 - 谢谢@Taniya –

我很欢迎@CamillaBannebjerreNielsen :) – Taniya

尝试在一个单独的.CSS添加（和调用这个.CSS去年在你的头上），并例如尝试

#company_name { 
display: none; //If it doesn't work try visibility: hidden; 
}

from w3school

来源

2016-12-19 11:05:44 Tellimi

使用CSS隐藏表中的列

回答

相关问题