Membuat HTML Table Responsive Dengan CSS

 Author : hadinug, 05 April, 2014, Komentar

JIka pada tulisan sebelumnya penulis menuliskan tentang membuat HTML table menarik untuk dilihat, nah sekarang kita akan coba ke tahap yang lebih tinggi, yaitu membuat HTML table responsive. 


Kami berharap, teman-teman sudah membaca atau mempelajari tutorial sebelumnya, karna pada tutorial kali ini hanya melakukan sedikit improvisasi di css saja.



HTML Table

<table cellpadding="0" cellspacing="0"> 
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Job Title</th>
            <th>Favorite Color</th>
            <th>Wars or Trek?</th>
            <th>Porn Name</th>
            <th>Date of Birth</th>
            <th>Dream Vacation City</th>
            <th>GPA</th>
            <th>Arbitrary Data</th>
        </tr> 
    </thead>
    <tbody>
        <tr>
            <td>James</td>
            <td>Matman</td>
            <td>Chief Sandwich Eater</td>
            <td>Lettuce Green</td>
            <td>Trek</td>
            <td>Digby Green</td>
            <td>January 13, 1979</td>
            <td>Gotham City</td>
            <td>3.1</td>
            <td>RBX-12</td>
        </tr>
        <tr>
            <td>The</td>
            <td>Tick</td>
            <td>Crimefighter Sorta</td>
            <td>Blue</td>
            <td>Wars</td>
            <td>John Smith</td>
            <td>July 19, 1968</td>
            <td>Athens</td>
            <td>N/A</td>
            <td>Edlund, Ben (July 1996).</td>
        </tr>
        <tr>
            <td>Jokey</td>
            <td>Smurf</td>
            <td>Giving Exploding Presents</td>
            <td>Smurflow</td>
            <td>Smurf</td>
            <td>Smurflane Smurfmutt</td>
            <td>Smurfuary Smurfteenth, 1945</td>
            <td>New Smurf City</td>
            <td>4.Smurf</td>
            <td>One</td>
        </tr>
        <tr>
            <td>Cindy</td>
            <td>Beyler</td>
            <td>Sales Representative</td>
            <td>Red</td>
            <td>Wars</td>
            <td>Lori Quivey</td>
            <td>July 5, 1956</td>
            <td>Paris</td>
            <td>3.4</td>
            <td>3451</td>
        </tr>
        <tr>
            <td>Captain</td>
            <td>Cool</td>
            <td>Tree Crusher</td>
            <td>Blue</td>
            <td>Wars</td>
            <td>Steve 42nd</td>
            <td>December 13, 1982</td>
            <td>Las Vegas</td>
            <td>1.9</td>
            <td>Under the couch</td>
        </tr> 
    </tbody>
</table>


CSS Responsive Table

<style type="text/css">
    *{
        font-family: sans-serif;
    }
    table { 
        width: 100%; 
        border-collapse: collapse; 
    }
    /* Zebra striping */
    tr:nth-of-type(odd) { 
        background: #eee; 
    }
    th { 
        background: #333; 
        color: white; 
        font-weight: bold; 
    }
    td, th { 
        padding: 6px; 
        border: 1px solid #ccc; 
        text-align: left; 
    }
    @media 
    only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px)  {

        /* Force table to not be like tables anymore */
        table, thead, tbody, th, td, tr { 
            display: block; 
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr { 
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

        tr { border-top: 1px solid #ccc; }

        td { 
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee; 
            position: relative;
            padding-left: 50%; 
        }

        td:before { 
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%; 
            padding-right: 10px; 
            white-space: nowrap;
        }

        /*
        Label the data
        */
        td:nth-of-type(1):before { content: "First Name"; }
        td:nth-of-type(2):before { content: "Last Name"; }
        td:nth-of-type(3):before { content: "Job Title"; }
        td:nth-of-type(4):before { content: "Favorite Color"; }
        td:nth-of-type(5):before { content: "Wars of Trek?"; }
        td:nth-of-type(6):before { content: "Porn Name"; }
        td:nth-of-type(7):before { content: "Date of Birth"; }
        td:nth-of-type(8):before { content: "Dream Vacation City"; }
        td:nth-of-type(9):before { content: "GPA"; }
        td:nth-of-type(10):before { content: "Arbitrary Data"; }
    }

    /* Smartphones (portrait and landscape) ----------- */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
        body { 
            padding: 0; 
            margin: 0; 
            width: 320px; }
    }

    /* iPads (portrait and landscape) ----------- */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        body { 
            width: 495px; 
        }

    }

</style>


Semoga bermanfaat, lihat demonya disini.



 
Bagikan halaman ke sosial media
 
Tags :   css       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda