在table中设置border-radius发现不起作用，网上查找了一番，原因是border-collapse:collapse和border-radius不兼容。

设计图效果

代码实现效果：

#table_wrap > table {

font-size: 16px;

text-align: center;

margin: 0 auto;

border-collapse: separate;

border-spacing: 0;

border: 2px #000;

}

table thead tr,table tbody tr {

height: 50px;

line-height: 50px;

/*background-color: pink;*/

}

table tr th:first-child,table tr td:first-child {/*设置table左边边框*/

border-left: 2px solid #eaeaea;

}

table tr th:last-child,table tr td:last-child {/*设置table右边边框*/

border-right: 2px solid #eaeaea;

}

table tr td:first-child,

table tr td:nth-child(2),

table tr td:nth-child(3),

table tr td:last-child{/*设置table表格每列底部边框*/

border-bottom: 2px solid #eaeaea;

}

/*table tr:last-child td:first-child,

table tr:last-child td:nth-child(2),

table tr:last-child td:nth-child(3),

table tr:last-child td:last-child{/!*设置table表格最后一列底部边框*!/

border-bottom: 2px solid #000;

}*/

table tr th {

background: #eaeaea;

}

table tr:first-child th:first-child {

border-top-left-radius: 12px;

}

table tr:first-child th:last-child {

border-top-right-radius: 12px;

}

table tr:last-child td:first-child {

border-bottom-left-radius: 12px;

}

table tr:last-child td:last-child {

border-bottom-right-radius: 12px;

}

参考资料地址：http://www.cnblogs.com/purl135/p/4918920.html

5种做法实现table表格中的斜线表头效果

table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢? 我总结了以下几种方法: 1.最最最简单的做法 直接去 ...

table表格整体居中 和 table表格中各行各列内容居中

1.table表格整个居中