html表格圆角样式,CSS表格样式：圆角，隔行，变色的具体实现

先看效果图：

 

CSS：

复制代码代码如下:

table {

max-width: 100%;

background-color: transparent;

border-collapse: collapse;

border-spacing: 0;

}

.table {

width: 100%;

margin-bottom: 18px;

}

.table th, .table td {

padding: 8px;

line-height: 18px;

text-align: left;

vertical-align: top;

border-top: 1px solid #dddddd;

}

.table th {

font-weight: bold;

}

.table thead th {

vertical-align: bottom;

}

.table caption + thead tr:first-child th, .table caption + thead tr:first-child td, .table colgroup + thead tr:first-child th, .table colgroup + thead tr:first-child td, .table thead:first-child tr:first-child th, .table thead:first-child tr:first-child td {

border-top: 0;

}

.table tbody + tbody {

border-top: 2px solid #dddddd;

}

.table-condensed th, .table-condensed td {

padding: 4px 5px;

}

.table-bordered {

border: 1px solid #dddddd;

border-collapse: separate;

*border-collapse: collapsed;

border-left: 0;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

}

.table-bordered th, .table-bordered td {

border-left: 1px solid #dddddd;

}

.table-bordered caption + thead tr:first-child th, .table-bordered caption + tbody tr:first-child th, .table-bordered caption + tbody tr:first-child td, .table-bordered colgroup + thead tr:first-child th, .table-bordered colgroup + tbody tr:first-child th, .table-bordered colgroup + tbody tr:first-child td, .table-bordered thead:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child th, .table-bordered tbody:first-child tr:first-child td {

border-top: 0;

}

.table-bordered thead:first-child tr:first-child th:first-child, .table-bordered tbody:first-child tr:first-child td:first-child {

-webkit-border-top-left-radius: 4px;

border-top-left-radius: 4px;

-moz-border-radius-topleft: 4px;

}

.table-bordered thead:first-child tr:first-child th:last-child, .table-bordered tbody:first-child tr:first-child td:last-child {

-webkit-border-top-right-radius: 4px;

border-top-right-radius: 4px;

-moz-border-radius-topright: 4px;

}

.table-bordered thead:last-child tr:last-child th:first-child, .table-bordered tbody:last-child tr:last-child td:first-child {

-webkit-border-radius: 0 0 0 4px;

-moz-border-radius: 0 0 0 4px;

border-radius: 0 0 0 4px;

-webkit-border-bottom-left-radius: 4px;

border-bottom-left-radius: 4px;

-moz-border-radius-bottomleft: 4px;

}

.table-bordered thead:last-child tr:last-child th:last-child, .table-bordered tbody:last-child tr:last-child td:last-child {

-webkit-border-bottom-right-radius: 4px;

border-bottom-right-radius: 4px;

-moz-border-radius-bottomright: 4px;

}

.table-striped tbody tr:nth-child(odd) td, .table-striped tbody tr:nth-child(odd) th {

background-color: #f9f9f9;

}

.table tbody tr:hover td, .table tbody tr:hover th {

background-color: #f5f5f5;

}

再看表格引用：

复制代码代码如下:

ID号 编码 名称 用户密码 管理员否 操作

1awinlau 胡光光 awin 管理员 编辑2hugge 刘若英 test 管理员 编辑3awinlau 胡光光 awin 管理员 编辑4awinlau 胡光光 awin 管理员 编辑