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 http://www.w3schools.com/TAGS/tag_col.asp `display` is not a supported attribute. — DevZer0, Jul 22 '13 at 16:13
@DevZer0 - uh-huh. w3fools mention that the `` 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 ` — enhzflep, Jul 22 '13 at 16:43

score 4 · Answer 1 · edited May 23 '17 at 12:08

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 '17 at 12:08

Community

1
1

answered Jul 22 '13 at 16:09

Isaac Dontje Lindell

3,246
6
24
35

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. – kostya Jul 23 '13 at 04:42
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). – Isaac Dontje Lindell Jul 23 '13 at 13:14
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. – kostya Jul 27 '13 at 06:28

score 0 · Answer 2 · answered Feb 13 '17 at 16:12

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>

Hide table column via code

2 Answers2