如何在CKEditor中为表格单元格各边设置不同边框？

CKEditor4 解决方案 #

1. 自定义CSS样式类 #

先在编辑器的content.css文件中定义不同边框组合的样式类：

/* 仅上下边框 */
.border-tb {
    border-top: 1px solid #333 !important;
    border-bottom: 1px solid #333 !important;
    border-left: none !important;
    border-right: none !important;
}

/* 仅左、上边框 */
.border-lt {
    border-left: 1px solid #333 !important;
    border-top: 1px solid #333 !important;
    border-bottom: none !important;
    border-right: none !important;
}

/* 可根据需求添加更多组合类 */

接着修改CKEditor的config.js，把这些样式类添加到编辑器的样式集合中：

CKEDITOR.config.stylesSet = [
    { name: '仅上下边框', element: 'td', attributes: { 'class': 'border-tb' } },
    { name: '仅左+上边框', element: 'td', attributes: { 'class': 'border-lt' } }
];

配置完成后，选中目标单元格，在编辑器的「样式」下拉菜单里就能选择对应的样式类，实现边框的独立配置。

2. 直接编辑源代码 #

如果不需要频繁操作，可选中单元格后切换到「源代码」视图，手动给<td>标签添加行内样式：

<td style="border-top:1px solid #333; border-bottom:1px solid #333; border-left:none; border-right:none;">单元格内容</td>

这种方式能精确控制每一边的边框样式、颜色和宽度。

CKEditor5 解决方案（推荐升级） #

CKEditor5的表格模块支持更直观的精细边框配置，主要有两种方式：

1. 利用单元格属性面板 #

启用TableCellProperties插件后，选中单元格，打开右侧的属性面板，找到「边框」选项组，可单独设置每一边的边框宽度、样式（实线/虚线等）和颜色，无需编写代码就能实现独立边框配置。

2. 自定义单元格样式 #

通过CKEditor5的样式系统创建预设样式，添加到编辑器的样式面板：
在编辑器初始化代码中添加自定义样式配置：

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        styles: [
            {
                name: '仅上下边框',
                element: 'td',
                attributes: {
                    style: 'border-top:1px solid #333; border-bottom:1px solid #333; border-left:none; border-right:none;'
                }
            },
            {
                name: '仅左+上边框',
                element: 'td',
                attributes: {
                    style: 'border-left:1px solid #333; border-top:1px solid #333; border-bottom:none; border-right:none;'
                }
            }
        ]
    } )

配置后，选中单元格即可在样式菜单中快速应用预设边框组合。

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