如何设置 AG-GRID 列垂直边框的样式 [英] How to style AG-GRID column vertical borders

问题描述

我希望我的 AG-Grid 列具有垂直边框.默认情况下，网格行具有水平边框.我希望它模仿常规 Excel 电子表格的外观和感觉.

I want my AG-Grid columns to have vertical borders. By default the grid rows have horizontal borders. I want it to mimic the regular Excel spreadsheet look and feel.

我尝试在列定义中使用单元格样式，如下所示:

I have tried using cell-styling in the column definitions like so:

this.columnDefs = [
  { headerName: 'Test', cellStyle: {'border-right-color': '#e2e2e2'}, field: 'test' }];

这就行了.但是当我点击一个单元格进行编辑时，它放在活动单元格上的蓝色边框被上面的单元格样式覆盖，所以我得到一个带有 3 个蓝色边框和 1 个灰色边框的单元格.

This does the trick. But when I click on a cell to edit, the blue border it puts on the active cell is overwritten by the cellstyling above, so i get a cell with 3 blue borders and 1 grey border.

这不是正确的方法....

This can't be the correct approach for this....

有人有什么想法吗?我试图做一些 CSS 样式，但一无所获，因为找出要覆盖的类似乎非常困难.

Has anybody any ideas? I've attempted to do some CSS styling, but have gotten nowhere as it seems to be insanely difficult to figure out which classes to overwrite.

推荐答案

最好通过设置 ag-grid 主题样式来完成.这里有关于它的文档 https://www.ag-grid.com/javascript-grid-themes-customising/

it is better done by styling the ag-grid theme. Here are docs about it https://www.ag-grid.com/javascript-grid-themes-customising/

我做了一个带边框的简单 Stackblitz 边框示例，您可以查看.

And I made a simple Stackblitz with borders Borders Example that you can check out.

这篇关于如何设置 AG-GRID 列垂直边框的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！