Birçok web sitesi geliştiricisi sitesinde tablo kullanabilir. Ancak bu tablolar mobil uyumlu değil ise, maalesef ki kötü görünümleri beraberinde getirebilmektedir. Bu yüzden, responsive tablo yapımı önem arz etmektedir. Sizlerle oldukça basit, sade ve kolay bir kullanım imkânı sağlayan hem de responsive olan bir tablo yapımı kodu paylaşmak istiyoruz. Aşağıdaki kodları sitenizde kullanmayı düşünebilir ve tamamen mobil uyumlu olacak şekilde dilediğiniz gibi spesifik biçimlendirme kodları ile de yapılandırma sağlayabilirsiniz.

AYRICA: CSS ile Görsel Ölçeklendirme Nasıl Yapılır?

CSS ile Responsive Tablo Yapımı Nasıl Olur?

1) HTML kodlarımız aşağıdaki gibidir.

<table>
<thead>
<tr>
<th>Başlık 1</th>
<th>Başlık 2</th>
<th>Başlık 3</th>
<th>Başlık 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Açıklama 1</td>
<td>Açıklama 2</td>
<td>Açıklama 3</td>
<td>Açıklama 4</td>
</tr>
</tbody>
</table>

2) CSS kodlarımız ise aşağıdaki gibi olacaktır.

table {
border: 1px solid #ccc;
border-collapse: collapse;
margin:0;
padding:0;
width: 100%;
}
table tr {
border: 1px solid #ddd;
padding: 5px;
}
table th, table td {
padding: 10px;
text-align: center;
}
table th {
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table thead {
display: none;
}
table tr {
border-bottom: 2px solid #ddd;
display: block;
margin-bottom: 10px;
}
table td {
border-bottom: 1px dotted #ccc;
display: block;
font-size: 13px;
text-align: right;
}
table td:last-child {
border-bottom: 0;
}
table td:before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}


Not: Yukarıdaki kodlarda yer alan kırmızı metin alanlarını, tablonuzdaki ilgili bölümlere ait başlık ve açıklamalar ile değiştirmeyi lütfen unutmayınız.