表格td元素左右padding设为0无效的问题解决求助

问题根源 #

你遇到的情况大概率是DataTables自带的默认CSS样式优先级更高，或者代码执行时机不对，导致你的设置被覆盖或者没生效。

解决方案 #

1. 用高权重CSS规则直接覆盖
   直接写CSS，用比DataTables默认样式更具体的选择器，确保优先级足够：

#topAlarmsDeviceLine td {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

要是不想用!important，可以结合DataTables的默认类来提升权重：

#topAlarmsDeviceLine.dataTable tbody td {
  padding-left: 0;
  padding-right: 0;
}

2. 确保jQuery代码在表格初始化后执行
   如果你的jQuery代码是在DataTables初始化前运行的，那时候表格的td元素还没生成，自然没效果。把代码放到DataTables的initComplete回调里，确保表格渲染完成后再修改样式：

$('#topAlarmsDeviceLine').DataTable({
  // 你的其他配置项
  initComplete: function() {
    $('#topAlarmsDeviceLine td').css({
      'padding-left': '0',
      'padding-right': '0'
    });
  }
});

3. 修正内联样式的写法
   你之前在html类型列返回值里加td内联样式的方法是错的——DataTables会自动生成td标签，你返回的内容是td内部的内容，所以应该给内部的span或容器调整样式，而不是重新写td。比如：

columns: [
  {
    data: 'status',
    render: function(data) {
      return '<span style="display:inline-block; vertical-align:middle;">彩色方块</span> <span>' + data + '</span>';
    }
  }
]

不过既然你确定去掉td的padding能解决对齐问题，优先用前两种方法即可。

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