如何在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>