几种Table美化的样例

适用于html中table标签的基础美化，css样式代码。

<style>
 table{
        border-collapse: collapse;
        width:100%;
        border:1px solid #c6c6c6 !important;
        margin-bottom:20px;
    }
    table th{
        border-collapse: collapse;
        border-right:1px solid #c6c6c6 !important;
        border-bottom:1px solid #c6c6c6 !important;
        background-color:#ddeeff !important;
        padding:5px 9px;
        font-size:14px;
        font-weight:normal;
        text-align:center;
    }
    table td{
        border-collapse: collapse;
        border-right:1px solid #c6c6c6 !important;
        border-bottom:1px solid #c6c6c6 !important;
        padding:5px 9px;
        font-size:12px;
        font-weight:normal;
        text-align:center;
        word-break: break-all;
    }
    table tr:nth-child(odd){
        background-color:#fff !important;
    }
    table tr:nth-child(even){
        background-color: #f8f8f8 !important;
    }
</style>

<style>
 table thead,table tr {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(230, 189, 189);
  }
 table {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(230, 189, 189);
  }

 table td,table th {
    padding: 5px 10px;
    font-size: 12px;
    font-family: Verdana;
    color: rgb(177, 106, 104);
  }

 table tr:nth-child(even) {
    background: rgb(238, 211, 210)
  }
 table tr:nth-child(odd) {
    background: #FFF
  }
</style>

<style>
 table {
        border-collapse: collapse;
        margin: 50px auto;
        font-size: 0.9em;
        min-width: 400px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    }

    table thead tr {
        background-color: #0398dd;
        color: #ffffff;
        text-align: left;
    }

    table th, table td {
        padding: 12px 15px;
    }

    table tbody tr {
        border-bottom: 1px solid #dddddd;
    }

    table tbody tr:nth-of-type(even) {
        background-color: #f3f3f3;
    }

    table tbody tr:last-of-type {
        border-bottom: 2px solid #0398dd;
    }

    table tbody tr.active-row {
        font-weight: bold;
        color: #0398dd;
    }
</style>

```
table {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}
table th {
    border-width: 1px;
    padding: 13px 0px;
    border-style: solid;
    border-color: #666666;
    background-color: #DCDFE6;
}
table td.left {
    width: 173px;
    border-width: 1px;
    padding: 13px 0px;
    border-style: solid;
    border-color: #DCDFE6;
    background: #f3f6f9;
    padding-right: 15px;
    text-align: right;
    line-height: 22px;
}
table td.right {
    width: 775px;
    border-width: 1px;
    border-style: solid;
    border-color: #DCDFE6;
    padding-left: 17px;
    background: #FFFFFF;
    line-height: 22px;
}
```