CSS制作表格式按钮

  仿照新手理财专题做新发基金专题的筛选的时候学会了用table和tablecell的样式来制作表格样式的图层，其实外面是两个div，里面分左中右来区分样式，css如下：

  

   #filter {            position: relative;            right: 20px;            float: right;            top: 8px;        }        #filterMenu {            height: 148px;            border-top: solid 1px #CFCED3;            box-sizing: border-box;            position: relative;            margin: 0 auto;            padding: 0 24px;            overflow: hidden;            /*border-bottom:solid 1px  #CFCED3;*/        }        .content {            display: table;            width: 100%;            /*padding:20px 0;*/            /*padding: 1.25rem 0.109375rem;*/        }        .filter {                     display: table-cell;            width: 33%;            box-sizing: border-box;            text-align: center;            vertical-align: middle;        }        .Left {            display: table-cell;            /*width: 100%;*/            text-align: center;                                }        .Middle {            display: table-cell;            /*width: 100%;*/            text-align: center;            vertical-align:top;          padding:  0 15px;                   }        .Right {            display: table-cell;            /*width: 100%;*/            text-align: center;            vertical-align:top;                               }        .filterButton {            width: 80px;            height: 32px;            border-radius: .2em;            outline: solid 1px #CFCED3;                        display: block;            vertical-align: middle;            line-height: 2.0;            margin: 13px auto;        }

  最后的filterButton用来描绘按钮，需要边角弧度以及线高，当然这些都需要把display变成block，否则边框贴着文字，这边margin用来设置上下间距，然后filter和Left结合来做左边部分，当然要设置他们的padding来做左边部分和中间部分以及右边部分的间距，这边尝试下来margin没有用处，具体也不知道原因，希望高手指点。HTML的如下：

   <!--write filtMenu here-->        <div id="filterMenu">            <div class="content">                <div class="filter Left">            <a id="all" class="filterButton"><span>全部</span></a>            <a id="bondType" class="filterButton"><span>债券型</span></a>             <a id="setToOpen"  class="filterButton"><span>定开债</span></a>            </div>            <div class="filter Middle">            <a id="stockType" class="filterButton "><span>股票型</span></a>            <a id="QDIIType" class="filterButton"><span>QDII</span></a>            </div>            <div class="filter Right">            <a id="hybridType" class="filterButton "><span>混合型</span></a>            <a id="breakevenType" class="filterButton"><span>保本型</span></a>            </div>                </div>        </div>

   这边特别要指出的我是按照px来设置高度和宽度，比较精确，到时候转换成自适应的REM，这边border边框用outline因为outline不占用空间。解释如下：

1.border
设置元素主要的边框属性，包括border-width、border-style、border-color，可缺省，无固定顺序。
e.g.

[css] view plaincopy
border: red 10px solid; 
border: 5px blue; 

border-style
统一设置元素各边框的格式，按照CSS顺序规则。可取的值如下表所示：

CSS顺序规则：当值有4个时，依次按照上、右、下、左设置；当值有3个时，依次按照上、左右、下设置；当值有2个时，依次按照上下、左右设置；当值只有1个时，则为4个方向设置为相同的值。以本属性为例：

[css] view plaincopy
border-style: soliddotted dashed double; 
/* 
上边框为实线 
右边框为点状 
下边框为虚线 
左边框为双线 
*/ 
border-style: solid dotteddashed; 
/* 
上边框为实线 
左右边框为点状 
下边框为虚线 
*/ 
border-style: soliddotted; 
/* 
上下边框为实线 
左右边框为点状 
*/ 
border-style: solid; 
/* 
4个方向的边框都是实线 
*/ 

border-style的默认值为border-style:none。
border-width
统一设置元素各边框的宽度，按照CSS顺序规则。只有当border-style不为none时才有效。不能设置为负值。值可以是thin（细）、medium（中等）、thick（粗），也可以是数值。默认为border-width: medium。
border-color
统一设置元素的各边框颜色，按照CSS顺序规则。当border-style为none或hidden时失效，所以在设置边框颜色前需要保证border-style的值不为none、hidden。值可以是任意CSS支持的颜色值。默认为border-color: transparent。
border-top、border-right、border-bottom、border-left
设置元素的上/右/下/左边框的主要属性，包括border-***-style、border-***-color、border-***-width，可缺省，无固定顺序。
border-top-style、border-right-style、border-bottom-style、border-left-style
设置元素上/右/下/左边框的样式，取值与border-style相同，默认为none。
border-top-width、border-right- width、border-bottom-width、border-left- width
设置元素上/右/下/左边框的宽度，取值与border-width相同。只有当border-***-style不为none时才有效，不能为负值，默认为medium。
border-top-color、border-right- color、border-bottom-color、border-left- color
设置元素上/右/下/左边框的颜色，取值与border-color相同。只有当border-***-style不为none和hidden时才有效。默认为transparent。
2.outline（轮廓）
在元素边框边缘的外围绘制一条包围元素的线，包括outline-color、outline-style、outline-width三个子属性的设置，可缺省，无固定顺序。轮廓不占据页面空间，也不一定是矩形。
除了IE以外的浏览器都直接支持outline。只有规定了!DOCUMENT之后的IE8以上版本的浏览器才支持outline。
e.g.
[css] view plaincopy
outline: solid black; 
outline: dotted thin #0000ff; 

outline-style
设置元素轮廓的格式，其取值与border-style类似，但没有hidden值。默认为none，无轮廓。
outline-width
设置元素轮廓的宽度，其取值与border-width类似。只有当outline-style不为none时才有效。默认为medium。
outline-color
设置元素轮廓的颜色，其取值与border-color类似。只有当outline-style不为none时才有效。默认为transparent。

总结：这两者的区别有:
1.outline是不占空间的，既不会增加额外的width或者height
2.outline有可能是非矩形的