如何解决Kendo React Grid添加CSS垂直边框后的1像素错位（无需resize）

当给Kendo React Grid的每列添加如下CSS垂直边框时，偶尔会出现1像素错位，调整网格尺寸后错位会自动恢复，但希望找到无需调整尺寸就能解决的办法，试过对齐操作但似乎依赖resize函数。

.k-grid .k-table-th, .k-grid td, .k-grid .k-table-td {
    border-left: 1px solid #dee2e6; 
}

可行解决方案： #

• 精准控制边框应用范围：避免给第一列添加左侧边框，减少叠加计算偏差，修改CSS如下：

.k-grid .k-table-th:not(:first-child), 
.k-grid .k-table-td:not(:first-child) {
    border-left: 1px solid #dee2e6; 
}

• 强制网格重绘：在组件挂载完成或数据更新后，手动触发网格重渲染。比如通过修改组件的一个无关状态（如const [key, setKey] = useState(0);，更新时调用setKey(prev => prev + 1)），将key属性绑定到Grid组件上，强制组件重新计算布局。

• 统一盒模型计算：给表头和数据列元素添加box-sizing: border-box，确保边框包含在元素尺寸内，避免溢出导致的错位：

.k-grid .k-table-th, .k-grid .k-table-td {
    box-sizing: border-box;
    border-left: 1px solid #dee2e6; 
}

• 固定列宽：在Grid的列配置中明确指定每列的width属性（如width="180"），禁用自动列宽调整，减少浏览器动态计算时的精度误差。

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