Responsive CSS Tablo Kodu

Web sitenizde kullanmak için oluşturacağınız tabloların artık Responsive olması gerekiyor. Çünkü internet kullanıcılarının yüzde 60′ ından fazlası, mobilden giriyor internete. Bu yüzden Responsiv Tablolar sitemizin yapısında önemli bir yer tutuyor. Ve bu responsive tablolar CSS veya JS olarak ayarlanabiliyor. Önce masaüstünde ve mobil cihzlarda nasıl görünüm elde edecez onu görelim.

Mobil Görünümü:

Masaüstü Görünümü:

Gördüğünüz gibi Mobil Responsive Standartlarına uygun olarak tablomuz 2 sütun şeklinde küçültüldü. Ve bu küçültme için gerekli CSS ve HTML kodları da aşağıda.

Responsive Tablo CSS Kodu :

.responsif-tablo { 
	width: 100%; 
	border-collapse: collapse; 
	}
.responsif-tablo tr:nth-of-type(odd) { 
	background: #f3f3f3; 
	}
.responsif-tablo th { 
	background: #0f5499; 
	color: white; 
	font-weight: bold; 
	}
.responsif-tablo td, .responsif-tablo 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)  {

.responsif-tablo table, 
.responsif-tablo thead, 
.responsif-tablo tbody, 
.responsif-tablo th, 
.responsif-tablo td, 
.responsif-tablo tr { 
        display: block; 
    }

.responsif-tablo thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
.responsif-tablo tr { margin-bottom:10px;border-bottom: 1px solid #ccc; }
.responsif-tablo td { 
        border-bottom: none; 
        position: relative;
        padding-left: 70%; 
    }

.responsif-tablo td:before { 
        position: absolute;
        top: 0px;
        left: 0px;
        width: 60%; 
        padding: 0 10px 0 5px; 
        line-height: 31px;
        white-space: nowrap;
        background-color:#0f5499;
        color:#fff;
    }
.responsif-tablo td:before { content: attr(data-title);

Responsive Tablo HTML Kodu :

<table class="responsif-tablo">
<thead>
 <tr>
<th>MODEL NUMARASI</th>
<th>Kapasite</th>
<th>Cinsi</th>
<th>Çeşidi</th>
 </tr>
</thead>
<tbody>
<tr>
<th>V8</th>
<td>80 GB</td>
<td>HDD</td>
<td>5.00</td>
</tr>
<tr>
<th>V10</th>
<td>100 GB</td>
<td>HDD</td>
<td>6.00</td>
</tr>
</tbody>
</table>

.
.
.

---

.
.
.
.
.
.