kostya
kostya

Reputation: 209

Hide table column via code

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.

Upvotes: 0

Views: 7922

Answers (2)

Thomas Williams
Thomas Williams

Reputation: 1548

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>

Upvotes: 0

Isaac Dontje Lindell
Isaac Dontje Lindell

Reputation: 3446

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?

Upvotes: 4

Related Questions