CODEWITHSUNDEEP
javascripthtml
Fred
Fred

Reputation: 378

How can I hide a column in html table where it has a merged header

I have a HTML table, in which I have a merged header for multiple columns. I need to hide/show some of the columns programmatically, and keep the merged header for the visible columns. the following is a sample of the table that I use. Any advice is much appreciated.

<table width="100%" border="1">
  <thead>
    <tr>
      <th align="center" field="Applicant" title="Funding Source" colspan="6" id="thi_cf_totalprjcost_2">Header 1</th>
    </tr>
    <tr>
      <th width="10%" align="center">Col1</th>
      <th width="10%" align="center">Col2</th>
      <th width="10%" align="center">Col3</th>
      <th width="10%" align="center">Col4</th>
      <th width="10%" align="center">Col5</th>
      <th width="10%" align="center">Col6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1-1</td>
      <td>Cell 1-2</td>
      <td>Cell 1-3</td>
      <td>Cell 1-4</td>
      <td>Cell 1-5</td>
      <td>Cell 1-6</td>
    </tr>
    <tr>
      <td>Cell 2-1</td>
      <td>Cell 2-2</td>
      <td>Cell 2-3</td>
      <td>Cell 2-4</td>
      <td>Cell 2-5</td>
      <td>Cell 2-6</td>
    </tr>
    <tr>
      <td>Cell 3-1</td>
      <td>Cell 3-2</td>
      <td>Cell 3-3</td>
      <td>Cell 3-4</td>
      <td>Cell 3-5</td>
      <td>Cell 3-6</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 188

Answers (1)

JonSG
JonSG

Reputation: 13152

If you know the columns you want to hide ahead of time you can create CSS rules to facilitate the hiding then apply the appropriate class(es) to your table.

table.hidesome thead tr:nth-child(2) th:nth-child(3) { display: none; }
table.hidesome tbody tr td:nth-child(3) { display: none; }
<table class="hidesome" width="100%" border="1">
  <thead>
    <tr>
      <th align="center" field="Applicant" title="Funding Source" colspan="6" id="thi_cf_totalprjcost_2">Header 1</th>
    </tr>
    <tr>
      <th width="10%" align="center">Col1</th>
      <th width="10%" align="center">Col2</th>
      <th width="10%" align="center">Col3</th>
      <th width="10%" align="center">Col4</th>
      <th width="10%" align="center">Col5</th>
      <th width="10%" align="center">Col6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 1-1</td>
      <td>Cell 1-2</td>
      <td>Cell 1-3</td>
      <td>Cell 1-4</td>
      <td>Cell 1-5</td>
      <td>Cell 1-6</td>
    </tr>
    <tr>
      <td>Cell 2-1</td>
      <td>Cell 2-2</td>
      <td>Cell 2-3</td>
      <td>Cell 2-4</td>
      <td>Cell 2-5</td>
      <td>Cell 2-6</td>
    </tr>
    <tr>
      <td>Cell 3-1</td>
      <td>Cell 3-2</td>
      <td>Cell 3-3</td>
      <td>Cell 3-4</td>
      <td>Cell 3-5</td>
      <td>Cell 3-6</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions