Flex 用Grid实现类似于Html的细线表格

我们在用Flex进行开发的时候，有时候需要实现像html 细线表格的那种效果，原理很简单，但是需要一些技巧，不然的话很难控制线条的粗细，其实只需要设置几个样式就能搞定，一下是源码，大家可以运行一下看看效果<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Style>
Grid
{
border-style:solid;
border-color:red;
border-sides:right;
horizontal-gap:1;
vertical-gap:1;
background-color:red;
}
GridItem
{
background-color:white;
}

</mx:Style>
<mx:Grid width="387" x="347" y="225">
<mx:GridRow width="100%">
<mx:GridItem width="50%">
<mx:Spacer width="50"/>
</mx:GridItem>
<mx:GridItem width="50%">
<mx:Spacer height="50"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%">
<mx:GridItem width="50%">
<mx:Button label="Button"/>
</mx:GridItem>
<mx:GridItem width="50%">
<mx:Button label="Button"/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow width="100%">
<mx:GridItem width="50%">
<mx:Button label="Button"/>
</mx:GridItem>
<mx:GridItem width="50%">
<mx:Button label="Button"
borderColor="#CCCCCC"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:Application>