Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS for hiding multiple columns in a table

I have a table similar to the one illustrated below in a SharePoint site. I cannot modify the table as it is generated dynamically but I can add external CSS to override its style. I am required to show only second column and hide first, third and fourth column.

The pseudo class to hide first column is

table#student tr td:first-child { display: none; }

Please help me with pseudo class or any other trick to hide third and forth column.

<table id="student">
    <tr>
        <td>Role</td>
        <td>Merin</td>
        <td>Nakarmi</td>
        <td>30</td>
    <tr>
        <td>Role</td>
        <td>Tchelen</td>
        <td>Lilian</td>
        <td>22</td>
    </tr>
    <tr>
        <td>Role</td>
        <td>Suraj</td>
        <td>Shrestha</td>
        <td>31</td>
    </tr>
</table>
like image 509
Merin Nakarmi Avatar asked Nov 20 '13 08:11

Merin Nakarmi


People also ask

How do you hide a table column in CSS?

Usually, to hide an element from view, you use the 'display' property and set it to 'none'. But CSS also has a property called 'visibility', which hides elements in a different way. In particular, we use 'visibility: collapse' here, which is designed especially for hiding table columns and rows.

How do I hide columns in a table?

To hide individual columns, open the table for which you are hiding a column, right-click the column, and click Hide from Client Tools. You can hide multiple columns at a time by holding down the Ctrl key or the Shift key.

How do I hide columns to show in HTML?

If you simply want to enable the users to hide the columns, just initiate the plug-in in the <script> section. The plug-in will add a cross “button” in each column's header. If you want to display buttons to show the hidden columns then simply add a <div> with a specific class as shown in the demo below.


1 Answers

CSS3:

table#student td {
   display: none;
}
table#student td:nth-child(2) {
   display: block;
}

Use nth-child selector to un-hide the 2nd <td> of every row, effectively showing the 2nd column.

like image 83
AlienHoboken Avatar answered Oct 17 '22 05:10

AlienHoboken