TableSorter 如何移除带tablesorter-noSort类列表头的未排序图标

解决方法 #

你只需要在现有CSS中新增一条针对.tablesorter-noSort类的样式规则，覆盖默认的背景图、内边距和光标样式即可，修改后的完整CSS如下：

<style>
  .tablesorter-headerAsc {
    background-image: url({% static "tablesorter-master/css/images/black-asc.gif" %});
  }
  .tablesorter-headerDesc {
    background-image: url({% static "tablesorter-master/css/images/black-desc.gif" %});
  }
  .tablesorter-headerUnSorted {
    background-image: url({% static "tablesorter-master/css/images/black-unsorted.gif" %});
  }
  .header, .tablesorter-header {
    background-color: #99bfe6;
    background-repeat: no-repeat;
    background-position: center right;
    padding: 4px 20px 4px 4px;
    white-space: normal;
    cursor: pointer;
  }
  /* 新增的禁用排序列样式 */
  .tablesorter-header.tablesorter-noSort {
    background-image: none !important;
    padding-right: 4px; /* 去掉原本给排序图标预留的右侧内边距 */
    cursor: default; /* 把指针样式改回默认，避免用户误以为可以点击排序 */
  }
</style>

规则说明 #

• 选择器.tablesorter-header.tablesorter-noSort的优先级高于默认的表头样式，不需要修改原有代码即可生效
• background-image: none直接移除了未排序图标，!important用于确保优先级足够，覆盖默认的背景图设置
• 调整右侧内边距和光标样式为优化交互体验的可选配置，你可以根据实际页面效果选择是否保留

内容的提问来源于stack exchange，提问作者オパラ