如何去除Bootstrap-table中可编辑单元格的下划线？X-editable格式设置

针对你遇到的动态生成表格里X-editable默认蓝色带下划线链接样式的问题，给你几个实用的解决办法：

• 全局CSS直接覆盖
  X-editable会给可编辑单元格的元素自动加上editable类，直接写CSS就能覆盖默认样式，不需要修改生成的HTML：

/* 去掉可编辑单元格的链接样式 */
.table td a.editable {
    color: inherit; /* 继承表格原有文字颜色 */
    text-decoration: none; /* 移除下划线 */
    border-bottom: none; /* 移除点式下划线 */
}

直接把这段CSS加到你的样式文件里，所有动态生成的可编辑单元格都会生效。

• 用Bootstrap-table的formatter包装内容
  在列配置里用formatter函数，把单元格内容用自定义样式的span包裹，动态生成时自动应用：

columns: [
    {
        field: 'targetField',
        title: '可编辑列标题',
        editable: true,
        formatter: function(value) {
            return '<span style="text-decoration: none; color: inherit;">' + (value || '') + '</span>';
        }
    }
]

这种方式不会影响X-editable的编辑功能，只是给显示内容套了一层样式容器。

• 通过X-editable的display回调加自定义类
  如果需要更灵活的控制，可以在X-editable初始化时，给默认状态的元素添加自定义类，再用CSS调整样式：

$('.editable').editable({
    // 你的其他配置项
    display: function(value) {
        $(this).addClass('editable-default-style');
    }
});

对应的CSS：

.editable-default-style {
    color: inherit;
    text-decoration: none;
    border-bottom: 0;
}

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