Membuat Tabel Responsive Dengan CSS

Tabel adalah - kumpulan data yang disusun berdasarkan baris dan kolom. Baris dan kolom ini berfungsi untuk menunjukkan data terkait keduanya. Dimana titik temu antara baris dan kolom adalah data yang dimaksud.

Dan sekarang dunia  Blogger atau website dituntut untuk selalu menampilkan yang responsive dikarenakan belakangan ini banyaknya orang atau pengguna internet yang memakai mobile


Style Kesatu
tabel, responsive, css


Style Kedua
Tabel, Responsive, Css



Pasang Di Postingan:-

  1. Seperti biasa sobat Login ke akun Blogger sobat
  2. Klik Buat Entri Baru Klik >>>> HTML Dan Kopas Kode dibawah ini.

Pasang Di Page:-

  1. Seperti biasa sobat Login ke akun Blogger sobat
  2. Klik Laman Klik >>> Laman Baru Klik >>> laman Kosong >>>> Klilk HTML
  3. Kopipaste Kode Dibawah ini.

Pasang Di Widget:-

  1. Seperti biasa sobat Login ke akun Blogger sobat
  2. Klik Add Widget Klik >>>> HTML/Javascript Dan Kopas Kode dibawah ini.


UNTUK KODE MODEL KE-1
 <style type='text/css'>

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; 
}
/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@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: 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"; }
}

</style>


<table>
	<thead>
	<tr>
		<th>Nomor</th>
		<th>Nama</th>
		<th>Pekerjaan</th>
		<th>Alamat Rumah</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>01</td>
		<td>Udin</td>
		<td>Tani</td>
		<td>Sukabumi</td>
	</tr>
	<tr>
		<td>02</td>
		<td>Jono</td>
		<td>Wiraswasta</td>
		<td>Jawa Tengah</td>
		<tr>
		<td>03</td>
		<td>Ucok</td>
		<td>Karyawan Swasta</td>
		<td>Medan</td>
	</tr>
	</tbody>
</table>

UNTUK KODE MODEL KE-2
 <style type='text/css'>
.page{
  max-width: 60em;
  margin: 0 auto;
}
table th,
table td{
  text-align: left;
}
table.layout{
  width: 100%;
  border-collapse: collapse;
}
table.display{
  margin: 1em 0;
}
table.display th,
table.display td{
  border: 1px solid #B3BFAA;
  padding: .5em 1em;
}

table.display th{ background: #D5E0CC; }
table.display td{ background: #fff; }

table.responsive-table{
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 30em){
    table.responsive-table{
      box-shadow: none;  
    }
    table.responsive-table thead{
      display: none; 
    }
  table.display th,
  table.display td{
    padding: .5em;
  }
    
  table.responsive-table td:nth-child(1):before{
    content: 'Number';
  }
  table.responsive-table td:nth-child(2):before{
    content: 'Name';
  }
  table.responsive-table td:nth-child(1),
  table.responsive-table td:nth-child(2){
    padding-left: 25%;
  }
  table.responsive-table td:nth-child(1):before,
  table.responsive-table td:nth-child(2):before{
    position: absolute;
    left: .5em;
    font-weight: bold;
  }
  
    table.responsive-table tr,
    table.responsive-table td{
        display: block;
    }
    table.responsive-table tr{
        position: relative;
        margin-bottom: 1em;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    }
    table.responsive-table td{
        border-top: none;
    }
    table.responsive-table td.organisationnumber{
        background: #D5E0CC;
        border-top: 1px solid #B3BFAA;
    }
    table.responsive-table td.actions{
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        background: none;
    }
}

</style>


<div class="page">
	<h1>A responsive table by : Kolom Tutorial™</h1>
<table class="layout display responsive-table">
    <thead>
        <tr>
            <th>Number</th>
            <th colspan="2">Name</th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td class="organisationnumber">140406</td>
            <td class="organisationname">Stet clita kasd gubergren, no sea takimata sanctus est</td>
            <td class="actions">
                <a href="?" class="edit-item" title="Edit">Edit</a>
                <a href="?" class="remove-item" title="Remove">Remove</a>
            </td>
        </tr>

        <tr>
            <td class="organisationnumber">140412</td>
            <td class="organisationname">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat</td>
            <td class="actions">
                <a href="?" class="edit-item" title="Edit">Edit</a>
                <a href="?" class="remove-item" title="Remove">Remove</a>
            </td>
        </tr>

        <tr>
            <td class="organisationnumber">140404</td>
            <td class="organisationname">Vel illum dolore eu feugiat nulla facilisis at vero eros</td>
            <td class="actions">
                <a href="?" class="edit-item" title="Edit">Edit</a>
                <a href="?" class="remove-item" title="Remove">Remove</a>
            </td>
        </tr>

        <tr>
            <td class="organisationnumber">140408</td>
            <td class="organisationname">Iusto odio dignissim qui blandit praesent luptatum zzril delenit</td>
            <td class="actions">
                <a href="?" class="edit-item" title="Edit">Edit</a>
                <a href="?" class="remove-item" title="Remove">Remove</a>
            </td>
        </tr>

        <tr>
            <td class="organisationnumber">140410</td>
            <td class="organisationname">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam
            </td>
            <td class="actions">
                <a href="?" class="edit-item" title="Edit">Edit</a>
                <a href="?" class="remove-item" title="Remove">Remove</a>
            </td>
        </tr>

    </tbody>
</table>
</div>

Demikian sobat artikel kali ini semga bermanfaat.

tutorial blog, komputer, css, jqwuery, html
Sourch : CSS-Trick

Berlangganan update artikel terbaru via email:

32 Responses to "Membuat Tabel Responsive Dengan CSS"

  1. Wah keren nih tutornya, boleh di coba nih.. :)

    ReplyDelete
    Replies
    1. silakan mas, terimakasih banyak atas kunjungannya.

      Delete
  2. wah mantap sob artikel nya, ga rugi jalan-jalan weekend disini, terima kasih udah berbagi yah sob...

    ReplyDelete
    Replies
    1. terimakasih mis atas kunjungannnya. sama2 mis

      Delete
  3. numpang baca-baca sob, lumayan nih buat tugas akhir mata kuliah, lanjutkan sob! Ane baca postingan ente yang laen dulu~

    ReplyDelete
    Replies
    1. ok silakan, terimakasih mas atas kunjungannya.

      Delete
  4. wah keren banget nih kang alex tabelnya bisa buat kasih pke dalam ilmu akunt nih hihihi,,,makasih sudah berbagi

    ReplyDelete
    Replies
    1. terrimakasih mas, silakan, terimakasih juga atas kunjungannya.

      Delete
  5. boleh jg dicoba ni tips trik nya

    ReplyDelete
  6. Replies
    1. Silakan mas, terimakasih kunjungannya

      Delete
    2. sebaiknya memang perlu dicoba, saya sangat setuju sobat

      Delete
  7. selamat malam sob ...
    makin konsis aja sama tutornya ... keren nih table nya lanjutkan kang

    ReplyDelete
    Replies
    1. terimakasih mas kunjungannya,

      siap laksanakan, hehhehe

      Delete
  8. mantap mas tutorialnya, cool banget nih tabelnya keren.
    terimakasih sudah berbagi

    ReplyDelete
    Replies
    1. sama2 mas, terimakasih kembali ats kunjungannya.

      Delete
  9. Replies
    1. terimakasih mas, atas support serta kunjungannya.

      Delete
  10. wah ini mantep dan sangat penting Mas,Suatu saat bisa digunakan kalau ada postingan yg sesuai, ijin save dulu nih Mas Alex.
    terima kasih atas tutorialnya yang sangat bermanfaat

    ReplyDelete
    Replies
    1. silakan mas, terimakkasih banyak atas kunjungannya.

      Delete
  11. Manteph gan, sukses terus...

    ReplyDelete
  12. trims banyak info nya mas, bisa buat tabel responsive nih, kalau seumpama kolomnya jadi 5 pada style 1 apakah tetap sama kode css nya mas, trims

    ReplyDelete

Terimakasih banyak atas kunjungannya, salam silatuhami Alexjoen

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel