ヘッダーがマージされたhtmlテーブルの列を非表示にするには

Question

複数の列にヘッダーをマージしたHTMLテーブルがあります。私はいくつかの列をプログラムで表示/非表示し、目に見える列のマージしたヘッダーを保持する必要があります。以下は私が使用しているテーブルのサンプルです。どんなアドバイスも大歓迎です。

<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

あなたは事前に非表示にしたい列を知っているなら、あなたは、あなたのテーブルに適切なクラス（複数可）を適用隠ぺいを容易にするためのCSSルールを作成することができます。

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>