如何去除Kendo Grid客户端页脚模板中各列的分隔线？

我之前也碰到过这个情况，Kendo Grid默认会给页脚单元格加上左右边框，也就是你看到的列分隔线，用CSS就能轻松搞定，给你几个实用方案：

方案1：全局移除所有页脚列的分隔线 #

直接覆盖Kendo的默认样式，把这段CSS加到你的项目样式文件或者页面的<style>标签里就行：

/* 移除页脚单元格的左右边框 */
.k-grid-footer td {
    border-left: none !important;
    border-right: none !important;
}

/* 可选：保留页脚的上下边框，让页脚和内容区有清晰区分 */
.k-grid-footer {
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

用!important是因为Kendo自带的样式优先级较高，这样能确保自定义样式覆盖成功。

方案2：只移除特定列的分隔线 #

如果你不想全局修改，只想给指定列去掉分隔线，可以给目标列添加自定义CSS类：
首先在你的列定义里加上HtmlAttributes：

columns.Bound(c => c.BonusAwarded)
       .ClientTemplate("#: '£' # #: BonusAwarded #")
       .Width(100)
       .ClientFooterTemplate("£ #= sum #")
       .Aggregates(agg => { agg.Add(a => a.BonusAwarded).Sum(); })
       .HtmlAttributes(new { @class = "no-footer-sep" }); // 新增这行标记目标列

然后写对应的CSS：

.k-grid-footer td.no-footer-sep {
    border-left: none !important;
    border-right: none !important;
}

方案3：精准定位单个Grid（避免影响其他Grid） #

如果页面上有多个Kendo Grid，不想改动其他Grid的页脚样式，可以通过Grid的ID精准定位：

/* 假设你的Grid ID是"bonusGrid" */
#bonusGrid .k-grid-footer td {
    border-left: none !important;
    border-right: none !important;
}

这些方法都能快速去掉页脚的列分隔线，你可以根据自己的需求选一个最合适的～

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