DataTable：如何隐藏表头？

Posted 2023-05-07

【中文标题】DataTable：如何隐藏表头？

【英文标题】：DataTable : How to hide table header?

【发布时间】：2015-04-20 01:02:38

【问题描述】：

我有 2 个使用 DataTable 的表：

顶部：完全匹配 底部：相关

这是他们现在的样子。

如您所见，不需要在第二个表格上显示表格标题。我想隐藏它。

我已经尝试在我的 CSS 上使用它：

由于 class= inventory_related

.inventory_related table thead 

        display:none;

    

我也试过全脱掉：

       <thead class="thin-border-bottom ">

            <th>Catalog # </th>
            <th>Description</th>
            <th>Available Vials</th>

        </thead>

这也不行。

有人对如何隐藏我的第二个表格标题有任何建议吗？

谢谢。

【问题讨论】：

类名inventory_related在<table>上吗？如果是这样，您需要table.inventory_related thead（但最好省略元素并写.inventory_related thead）

一张表上只能有一个classattribute。改为<table class="display inventory_related" id="inventory_related">对不起，我不是故意的。应该是这样的<table class="display inventory_related" id="inventory_related" >

【参考方案1】：

就我而言，设置

.inventory_related thead     
    display:none;   

搞乱了列宽，而

.inventory_related thead     
    visibility: collapse;   

似乎工作正常。

【参考方案2】：

<table>
  <thead style='display:none;'>
    <th>header 1</th>
    <th>header 2</th>
  </thead>
  <tbody>
    <td>row value 1</td>
    <td>row value 2</td>
  </tbody>
</table>

【参考方案3】：

请以以下代码为例：

.inventory_related thead 
  display: none;

<table>
  <thead>
    <th>header 1</th>
    <th>header 2</th>
  </thead>
  <tbody>
    <td>row value 1</td>
    <td>row value 2</td>
  </tbody>
</table>
<table class='inventory_related'>
  <thead>
    <th>header</th>
    <th>header 2</th>
  </thead>
  <tbody>
    <td>row value 3</td>
    <td>row value 4</td>
  </tbody>
</table>

【讨论】：

我在想，如何隐藏选定的列标题和列数据。

@parladneupane 您可能应该使用您需要的详细信息开始一个新问题。

【参考方案4】：

如果<table>的类是inventory_related那么写下面的css

.inventory_related thead     
    display:none;   

【参考方案5】：

如果你想用 jQuery(js) 来做，那么你可以简单地做：

$("#datatableId").css("display", "none");

其中 'datatableId' 是您的表的 ID 或包含该表的某个 div 标签。