GridView FooterTemplate右侧多出一列问题求助

我最近碰到了和原帖作者一模一样的问题，试过原帖里的解决方案后还是没搞定，折腾了好一阵终于找到根源了，分享给大家：

我的问题场景 #

• 在Visual Studio的设计视图里，GridView的FooterTemplate显示完全正常，布局对齐都没问题
• 但一运行应用，FooterTemplate的右侧就会莫名其妙多出一列，导致整个Footer布局错乱
• 一开始我把所有列都转换成了TemplateField，以为是绑定列的问题，结果还是没用

排查出的根源 #

后来一点点排除，发现问题居然出在我给GridView的列加的响应式CssClass上！把这些类删掉之后，Footer里的按钮位置立刻就恢复正常了，但这样一来响应式布局的效果就没了，所以得想办法兼顾两者。

可行的解决思路 #

1. 统一响应式类的应用 #

如果你用的是像Bootstrap这类框架的响应式类（比如d-none d-md-table-cell），一定要确保GridView的每一列（包括FooterTemplate对应的单元格）都应用了完全一致的响应式类。举个例子：如果你的数据绑定列用了CssClass="d-none d-lg-table-cell"，那FooterTemplate里对应的单元格也必须加上这个类，这样就能保证在不同屏幕尺寸下，列的显示/隐藏逻辑是统一的，不会出现列数不匹配的情况。

2. 固定Footer单元格的宽度与结构 #

可以手动给FooterTemplate里的每个单元格设置宽度，或者用CSS统一控制：

/* 假设你的GridView有个ID是MyGridView，Footer的单元格可以这样设置 */
#MyGridView tfoot td {
    width: inherit;
    /* 也可以根据列的实际宽度设置具体数值，比如width: 15%; */
}

另外要注意，GridView的ShowFooter属性要设为true，而且FooterTemplate里的单元格数量必须和GridView的列数完全对应，不能多也不能少。

3. 用精准CSS选择器覆盖冲突样式 #

如果是第三方响应式框架的样式和GridView默认样式冲突，可以用更具体的CSS选择器来覆盖：

#MyGridView .footer-cell {
    display: table-cell !important;
    /* 根据实际情况添加其他样式，比如padding、边框等 */
}

给FooterTemplate里的单元格加上footer-cell这个类，就能精准控制样式了。

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