[CSS]利用CSS把TABLE變成響應式

利用CSS把TABLE變成響應式

<!-- rwd-table css -->
<style type="text/css">
    .rwd-table {
        background: #fff;
        overflow: hidden;
        line-height: 15px;
    }
                        
    .rwd-table tbody tr:nth-of-type(2n) {
        background: #eee;
        background: rgb(255, 255, 204);
        /*background: #fff;*/
    }
                        
    .rwd-table th {
        background-color: #D8E6A2
    }
                        
    .rwd-table th,
    .rwd-table td {
        margin: 0.5em 1em;
    }
                        
    .rwd-table {
        min-width: 100%;
    }
                        
    .rwd-table th {
        display: none;
    }
                        
    .rwd-table td {
        display: block;
    }
                        
    .rwd-table td:before {
        /*
		content: attr(data-th) " :";
		font-weight: bold;
		width: 6.5em;
		display: inline-block;
		*/
    }
                        
    .rwd-table th,
    .rwd-table td {
        text-align: left;
    }
                        
    .rwd-table th,
    .rwd-table td:before {
        color: #4a5e03;
        font-weight: bold;
    }
                        
    @media (min-width: 640px) {
        .rwd-table td:before {
            display: none;
        }
        .rwd-table th,
        .rwd-table td {
            display: table-cell;
            padding: 0.25em 0.5em;
        }
        .rwd-table th:first-child,
        .rwd-table td:first-child {
            padding-left: 0;
        }
        .rwd-table th:last-child,
        .rwd-table td:last-child {
            padding-right: 0;
        }
        .rwd-table th,
        .rwd-table td {
            padding: 1em !important;
        }
    }
</style>