Hide table column via code

Question

I know there a lot of postings about hiding columns but I would add another question. Below is a snippet from php-generated html:

<table id="dataGrid">
<col style="display:none">
<col style="display:table-column">
<col style="display:table-column">
<col style="display:table-column">
<col style="display:table-column">
<col style="display:table-column">
<col style="display:table-column">
<col style="display:table-column">
<thead><tr>
...

This doesn't work at all. Is there an effective way to hide a column via html/css, without using a myriad of td's? w3.org implies that there is, but I have tried visibility, hidden, collapse table cells, and so on - with no result.

I don't want to set a class for each in huge table, so jquery is out of the question.

Please see w3schools.com/TAGS/tag_col.asp display is not a supported attribute. — DevZer0
– DevZer0, Commented Jul 22, 2013 at 16:13
@DevZer0 - uh-huh. w3fools mention that the <col> tag supports align, char, charoff, span, valign and width attributes. However it has nothing to say regarding which style attributes it will respond to. Perhaps you misread <col style="display as <col display? — enhzflep
– enhzflep, Commented Jul 22, 2013 at 16:43

Community · Accepted Answer · 2017-05-23 12:08:54Z

4

Try something like this in CSS:

#myTable tr *:nth-child(2), {
    display: none;
}

In this case, 2 is the index of the column you want to hide.

I got this from the second answer of this question: How to hide columns in HTML table?

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Jul 22, 2013 at 16:09

Isaac Dontje Lindell

3,4967 gold badges27 silver badges39 bronze badges

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

3 Comments

kostya Over a year ago

This is no solution. A table may have unknoun number of fields and furthermore unknown fields to hide. I just want to hide fields with some non-editable attribute like auto_increment one. Since I spent a lot of time looking for method to hide whole col and got no result so I simple put disable prop to corresponding input tag.

Isaac Dontje Lindell Over a year ago

The index, 2, refers to the column number to hide. So if you have 5 columns, the above CSS rule would hide the entire 3rd column (0, 1, 2).

kostya Over a year ago

Thanks. But what could i do with 20 columns and 'hidden' numbers 0,4,5,18? Next table opens and there 5 cols and col #0 #2 wants to be hidden. So I ended up with canonical solution: check field flags and set class hide{display:none} for each corresponding th-td in while loop. Works great. Here I just want to hear something like this: hide whole col now impossible at all.

Thomas Williams · Accepted Answer · 2017-02-13 16:12:44Z

0

I would do it this way. This will hide the "Second Title" column, or middle column. You could also replace style="display:none" with a variable like this style="<?php echo $nodisplay;?>" Then you could turn columns off or on depending on your data. For instance $nodisplay could be equal to display:none; depending on whether you wish to show the column or not.

<table id="dataGrid">
<thead>
    <tr>
        <th>First Title</th>
        <th style="display:none">Second Title</th>
        <th>Third Title</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th>First Body</th>
        <th style="display:none">Second Body</th>
        <th>Third Body</th>
    <tr>
</tbody>
<table>

answered Feb 13, 2017 at 16:12

Thomas Williams

1,5481 gold badge20 silver badges39 bronze badges

Collectives™ on Stack Overflow

Hide table column via code

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related