我如何隐藏一个列在html表中，它有一个合并的标题

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

本文关键字：表中 html 有一个 标题 合并 一个 何隐藏 隐藏      更新时间：2023-09-26

我有一个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>

如果你提前知道你想隐藏的列，你可以创建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>

相关文章：