尽管Flex中默认的其他主题样式很容易通过css定义，但有些样式例如DataGrid每一个 column Header的分割器却不容易被定义。因为这样元素的Halo skin是可以被重载的，所以我们可以用下面的解决方案改变颜色或者完全的清除掉它。
在每一个data grid 的column header 之间有两个默认的1像素的垂直线（一条是有50％透明度的白线，另一条和border颜色一致），但是在某些例子中这个看起来是并不是太好，白色的线太明显了，或者你并不想要这个白色的垂直线。
有许多方法可以解决这个问题，DataGrid有一个css样式叫“HeaderSeparatorSkin”，我们可以创建一个1×1px 的透明gif图片代替图片。

另一种方法是创建一个类NullSkin，我们可以用它完全清除separators,程序化的皮肤可以继承自ProgrammaticSkin, Border or RectBorder 类，在这个例子中我们将继承自ProgrammicSkin类，重载它的measuredWidth(), measuredHeight() and updateDisplayList(w:Number, h:Number)方法：

package com.triggersoft.skins{  import mx.skins.ProgrammaticSkin;  import flash.display.Graphics;    public class NullSkin extends ProgrammaticSkin  {    public function NullSkin()    {      super();    }      override public function get measuredWidth():Number {      return 0;    }      override public function get measuredHeight():Number {      return 0;    }      override protected  function updateDisplayList(w:Number, h:Number):void {}  }}
在以上代码中我们返回一个0 x 0px尺寸的皮肤，updateDisplayList 方法中没做任何操作。我们可以用下面的css应用到Datagrid的皮肤中：

header-separator-skin: ClassReference("com.triggersoft.skins.NullSkin");清除separators是个不错的处理方式，但如果我们想创建一个更加自定义化的皮肤呢？例如我们可以创建一个和Datagrid的border同样颜色的1px宽的垂直线：package com.triggersoft.skins{  import mx.skins.ProgrammaticSkin;  import flash.display.Graphics;   public class DGHeaderColourSeparator extends ProgrammaticSkin  {     public function DGHeaderColourSeparator() {      super();    }     override public function get measuredWidth():Number {      return 1;    }     override public function get measuredHeight():Number {      return 10;    }     override protected  function updateDisplayList(w:Number, h:Number):void {      var borderColor:uint = getStyle("borderColor");      var g:Graphics = graphics;      g.moveTo(0,0);      g.lineStyle(1,borderColor);      g.lineTo(0,h);    }  }}
然后再设置css到我们的应用中：

header-separator-skin: ClassReference("com.triggersoft.skins.DGHeaderColourSeparator ");

from: