Created
June 10, 2016 06:16
-
-
Save yudaprawira/dbf74d87bcdc0a81332241bdaa10c34a to your computer and use it in GitHub Desktop.
Responsive Table
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Responsive Table</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| <meta name="description" content="responsive table headers column" /> | |
| <meta name="keywords" content="responsive, table, headers, column" /> | |
| </head> | |
| <body> | |
| <h1>Responsive Table</h1> | |
| <table class="yp-table table-bordered"> | |
| <tr> | |
| <th>Nama Mahasiswa</th> | |
| <th>Jenis Kelamin</th> | |
| <th>Kota Asal</th> | |
| <th>Jurusan</th> | |
| </tr> | |
| <tr> | |
| <td data-th="Nama Mahasiswa">Yuda Prawira</td> | |
| <td data-th="Jenis Kelamin">Laki-laki</td> | |
| <td data-th="Kota Asal">Bojonegoro</td> | |
| <td data-th="Jurusan">Teknik Informatika</td> | |
| </tr> | |
| <tr> | |
| <td data-th="Nama Mahasiswa">Arif Mawardi</td> | |
| <td data-th="Jenis Kelamin">Laki-laki</td> | |
| <td data-th="Kota Asal">Bojonegoro</td> | |
| <td data-th="Jurusan">Teknik Informatika</td> | |
| </tr> | |
| <tr> | |
| <td data-th="Nama Mahasiswa">Rohmat Hidayat</td> | |
| <td data-th="Jenis Kelamin">Laki-laki</td> | |
| <td data-th="Kota Asal">Sidoarjo</td> | |
| <td data-th="Jurusan">Teknik Informatika</td> | |
| </tr> | |
| <tr> | |
| <td data-th="Nama Mahasiswa">Saiful Anwar</td> | |
| <td data-th="Jenis Kelamin">Laki-laki</td> | |
| <td data-th="Kota Asal">Malang</td> | |
| <td data-th="Jurusan">Teknik Informatika</td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| background: #eee; | |
| } | |
| body { | |
| background: #fff; | |
| width: 90%; | |
| margin: 10px auto; | |
| border: 1px solid #ddd; | |
| padding: 10px; | |
| } | |
| h1 { | |
| font-weight: normal; | |
| letter-spacing: -1px; | |
| color: #34495E; | |
| } | |
| .yp-table { | |
| margin : 5px; | |
| border-spacing: 0; | |
| border-collapse: collapse; | |
| } | |
| .yp-table th { | |
| display: none; | |
| } | |
| .yp-table td { | |
| display: block; | |
| } | |
| .yp-table td:first-child { | |
| padding-top: .5em; | |
| } | |
| .yp-table td:last-child { | |
| padding-bottom: .5em; | |
| } | |
| .yp-table td:before { | |
| content: attr(data-th) " : "; | |
| font-weight: bold; | |
| width: 6.5em; | |
| display: inline-block; | |
| } | |
| @media (min-width: 480px) { | |
| .yp-table td:before { | |
| display: none; | |
| } | |
| } | |
| .yp-table th, .yp-table td { | |
| text-align: left; | |
| } | |
| @media (min-width: 480px) { | |
| .yp-table th, .yp-table td { | |
| display: table-cell; | |
| padding: .25em .5em; | |
| } | |
| .yp-table th:first-child, .yp-table td:first-child { | |
| padding-left: 0; | |
| } | |
| .yp-table th:last-child, .yp-table td:last-child { | |
| padding-right: 0; | |
| } | |
| } | |
| .yp-table { | |
| color: #000; | |
| overflow: hidden; | |
| } | |
| .yp-table tr { | |
| border-color: #46637f; | |
| } | |
| .yp-table th, .yp-table td { | |
| margin: .5em 1em; | |
| } | |
| @media (min-width: 480px) { | |
| .yp-table th, .yp-table td { | |
| padding: 1em !important; | |
| } | |
| } | |
| .table-bordered>tbody>tr>td, | |
| .table-bordered>tbody>tr>th, | |
| .table-bordered>tfoot>tr>td, | |
| .table-bordered>tfoot>tr>th, | |
| .table-bordered>thead>tr>td, | |
| .table-bordered>thead>tr>th { | |
| border: 1px solid #ddd; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment