利用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>