DataTables中仅能操作td内部元素时，如何为含.error-cell的td加内边距？

直接在你现有的.dataTable td:has(.error-cell)选择器里加padding属性就行，另外注意你原来的border写法有问题，得补上边框宽度和样式，修改后的CSS代码如下：

.dataTable {
  border: 1px solid black;
}

.dataTable td {
  border: 1px solid #ccc;
} 

.dataTable td:has(.error-cell) {
  padding: 8px 12px; /* 数值可以根据设计要求自行调整 */
  border-radius: 4px;
  border: 1px solid #FAC7BE; /* 补充边框宽度和样式，否则边框无法正常显示 */
  background: #FFF0EE;
  color: #B23015;
  fill: #B23015;
}

补充说明 #

1. 给目标<td>直接设置padding，完全符合你不能把这些样式加到.error-cell类上的要求。
2. 原代码里border: #FAC7BE;是无效写法，CSS边框属性必须同时指定宽度、样式（比如solid）和颜色，浏览器才能正确渲染边框，所以要改成完整的声明。
3. 如果你需要兼容不支持:has()选择器的旧浏览器（比如老版本Firefox），可以用DataTables的回调函数给目标<td>动态添加自定义类，再通过类选择器设置样式：

旧浏览器兼容方案 #

初始化DataTables时添加createdRow回调：

$('#你的表格ID').DataTable({
  createdRow: function(row) {
    $(row).find('td').each(function() {
      if ($(this).has('.error-cell').length) {
        $(this).addClass('error-td');
      }
    });
  }
});

然后用类选择器编写样式：

.dataTable td.error-td {
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #FAC7BE;
  background: #FFF0EE;
  color: #B23015;
  fill: #B23015;
}

这种方式不用依赖:has()选择器，也不需要修改.error-cell的样式，同样能实现需求。

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