Hide columns in a table using CSS

Question

I want to hide some of the columns in the table below. It is from a wordpress plugin so the ids and classes are predefined. I hope I can solve it with css fx: display:none, but I cant seem to get it to work.

<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>

So you want to hide a column based on an ID in <thead>?

Terry
– Terry

2016-12-19 10:57:39 +00:00
Commented Dec 19, 2016 at 10:57 — Terry
– Terry, Commented Dec 19, 2016 at 10:57
Yes thats right

Camilla Bannebjerre Nielsen
– Camilla Bannebjerre Nielsen

2016-12-21 11:18:21 +00:00
Commented Dec 21, 2016 at 11:18 — Camilla Bannebjerre Nielsen
– Camilla Bannebjerre Nielsen, Commented Dec 21, 2016 at 11:18

Taniya · Accepted Answer · 2016-12-19 10:58:35Z

5

You can use the nth-child selector in CSS to hide the columns you need. But in that case you need to hide that same th as well.

CSS:

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

Also check this for better understanding https://css-tricks.com/how-nth-child-works/

answered Dec 19, 2016 at 10:58

Taniya

5502 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shobhit Srivastava Over a year ago

PLUS 1 for correctly interpreting the question, even though it lacks clarity.

Tellimi · Accepted Answer · 2016-12-19 11:05:44Z

0

Try to add in a separate .CSS (and call this .CSS in last in your head) and for example try

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

from w3school

answered Dec 19, 2016 at 11:05

Tellimi

1092 silver badges10 bronze badges

Collectives™ on Stack Overflow

Hide columns in a table using CSS

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related