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

DEMO STYLE KE SATU

Style Kedua

DEMO STYLE KE DUA

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.

Sourch : CSS-Trick

M. Alex Joenaedi

Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.

Share this post