如何为DataTable插件同一列内的两组数据设置不同CSS样式

解决方法 #

你需要调整两处配置即可实现需求：

1. 移除createdCell回调中给整个<td>设置全局加粗的代码，避免样式作用到单元格内所有内容
2. 在render渲染函数中，仅给shift_name部分包裹加粗标签，shift_description部分保持原格式即可

修改后的列配置代码如下：

{ 
    data: 'shift_name', 
    name: 'shift_name', 
    width: '15%', 
    "render": function ( data, type, row, meta ) {
        const nameContent = row.shift_name ? row.shift_name : 'N/A';
        const descContent = row.shift_description ? row.shift_description : 'N/A';
        // 仅给班次名称套strong标签实现加粗效果
        return `<strong>${nameContent}</strong><br>${descContent}`;
    }
},

如果后续需要统一调整班次名称的样式，也可以给包裹的元素添加自定义类，比如<span class="shift-name">${nameContent}</span>，再在CSS文件中定义.shift-name {font-weight: 700;}即可，扩展性更高。

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