让 Ext GridPanel 单元格显示竖线

阅读更多

转载自http://www.monkey6.cn/?p=36

很久没更新了，今天来个小规模更新。

Ext GridPanel 的默认样式的单元格没有显示竖线，若要显示可在页面中加入以下CSS样式：

< style type = “text/css” >
    .x-grid3-cell-inner{
        border-right : 1px solid #eceff6;
    }
style >

然后发现竖线与表头没有对齐，有一个像素的误差，再加入样式，代码就成了这样：

< style type = “text/css” >
    /*显示竖线*/
    .x-grid3-cell-inner{
        border-right : 1px solid #eceff6;
    }
    /*与表头对齐*/
    .x-grid3-row td , .x-grid3-summary-row td{
        padding-right : 0px;
    }
style >

接着发现行间有一个像素的间隔，再改吧，代码如下：

< style type = “text/css” >
    /*显示竖线*/
    .x-grid3-cell-inner{
        border-right : 1px solid #eceff6;
    }
    /*与表头对齐*/
    .x-grid3-row td , .x-grid3-summary-row td{
        padding-right : 0px;
    }
    /*去掉行间空白*/
    .x-grid3-row {
        border-top-width : 0px;
        border-bottom-width : 0px;
    }
style >

上面的代码效果是在代码发芽网弄的，挺靠谱，我喜欢。这样连代码插件都不用安装了，不影响速度，好。