如何根据媒体查询尺寸仅隐藏DataTable的某一个指定列

方案1：使用DataTable Responsive扩展原生配置（最适配，无样式冲突） #

直接用框架自带的断点规则控制列显隐，不会和自带响应式逻辑冲突：

$('#你的表格ID').DataTable({
  responsive: {
    breakpoints: [
      { name: 'desktop', width: Infinity },
      { name: 'phone',   width: 700 }
    ]
  },
  columnDefs: [
    // 其他列配置省略
    {
      targets: 4,
      // 仅宽度大于700px时显示该列，小于700px自动完全隐藏
      className: 'desktop'
    }
  ]
});

如果需要小屏下该列在展开子行正常显示不溢出，可额外配置子行渲染规则，给链接预留足够宽度即可。

方案2：修复自定义CSS隐藏列的问题 #

你之前的代码不生效有两个原因：一是CSS和HTML/JS配置混写出现语法错误，二是DataTable默认table-layout:auto会给隐藏列预留占位宽度，修改后写法如下：

1. 先在HTML表头和DataTable配置中给第4列加hide类，不要把这部分代码写到CSS媒体查询里

<th class="hide" width="30%">Link</th>

columnDefs: [
  { targets: [4], className: "hide" }
]

2. 写CSS规则，优先级要高于DataTable默认样式：

@media (max-width: 700px) {
  table.dataTable {
    table-layout: fixed !important;
    width: 100% !important;
  }
  .hide {
    display: none !important;
  }
  /* 同步隐藏展开子行中的对应链接项 */
  table.dataTable tr.child ul.dtr-details li:has(> .dtr-title:contains("Link")) {
    display: none !important;
  }
}

方案3：无需隐藏列，直接修复链接溢出问题 #

如果不需要隐藏列，仅解决溢出问题，给链接加强制折行样式即可：

/* 适配主表和展开子行的链接样式 */
table.dataTable td:nth-child(4) a,
table.dataTable tr.child ul.dtr-details li a {
  word-wrap: break-word !important;
  word-break: break-all !important;
  white-space: normal !important;
  display: inline-block;
  max-width: 100%;
}

内容的提问来源于stack exchange，提问作者zultz