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