@charset "utf-8";
table.responsive{
    width: 98%;
    margin: 0 auto;
    border: 1px solid #666666;
    border-collapse: collapse;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .6);
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, .6);
    box-shadow: 0 0 10px rgba(0, 0, 0, .6);
}
table.responsive th,table.responsive td{
    border: 1px solid #666666;
    padding: .5em 1em;
}
table.responsive th{
    background: #204c97; color:#FFF; font-weight:bold;
}
table.responsive .actions a{
    color: #ff5c00;
    text-decoration: none;
    padding: 0 4px;
}
table.responsive .number,table.responsive .actions{
    text-align: center;
}

.responsive tr:nth-child(odd){background: #f2f2f2;}
.responsive tr:nth-child(even){background: #fff;}
table.responsive tr:hover{background:#dc1f3f;}
table.responsive tr:hover td{color:#FFF;}

@media (max-width: 480px) {
    table.responsive{
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        border: none;
    }
    table.responsive thead{
        
    }
　　<!-- 将所有表格变成块级元素，以使表格独行显示 -->
    table.responsive td{
        display: block;
        border: none;
    }
    table.responsive .number{
        text-align: left;
        background: #204c97;
    }
    table.responsive .number:before{
        padding-right: 20px;
        font-weight: bold;
    }
    table.responsive .name:before{
        padding-right: 20px;
        font-weight: bold;
    }
    table.responsive tr{
        position: relative;
    }
    table.responsive .actions{
        position: absolute;
        right: 0;
        top: 0;
    }

table.responsive tr:hover{background:#dc1f3f;}
table.responsive tr:hover td{color:#FFF;}
}