使用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隱藏表中的列

回答

相關問題