Question

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>

Answer 1

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>

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

1 个答案: