Css responsive tablo yapımı

Ders için biraz geç kalsakta kenarda durmasının bir sakıncası yoktur. Responsive tasarımlarda en çok zorlanılan konulardan biride tabloların responsive yapıya uydurulmasıdır. İnternette bunla ilgili örnekler var. Bir örnekte ben yayınlamak istedim. Css kodları içinde açıklama satırları mevcuttur. İnternet explorer yani edge hariç ve mobil tarayıcılarda dahil bütün tarayıcılar sorunsuz çalışmaktadır.

Css kodlarımız:

.responsive-table { 
width: 100%; 
border-collapse: collapse; 
}
/* Bir satırı renklendirip sonraki satırı renklendirmiyoruz */
.responsive-table tr:nth-of-type(odd) { 
background: #f3f3f3; 
}
.responsive-table th { 
background: #333; 
color: white; 
font-weight: bold; 
}
.responsive-table td, .responsive-table 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)  {

    /* Tablo elemanlarının tablo özelliklerini korumalarını sağlıyoruz */
    .responsive-table table, 
    .responsive-table thead, 
    .responsive-table tbody, 
    .responsive-table th, 
    .responsive-table td, 
    .responsive-table tr { 
        display: block; 
    }
    
    /* Kolon başlıklarını satırın tablo özelliğini koruması için position ablosute yaparak top ve left değerilerini eksi değer olarak veriyoruz */
    .responsive-table thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .responsive-table tr { margin-bottom:10px;border-bottom: 1px solid #ccc; }
    
    /* td elemanına position:relative vererek td içinde kullanacağımız before nesnesinin taşmasını önlüyoruz. */
    .responsive-table td { 
        border-bottom: none; 
        position: relative;
        padding-left: 40%; 
    }
    
    /* td içeriğinin başına içerik alanı ekliyoruz */
    .responsive-table td:before { 
        position: absolute;

        /* Genişlik ve konumunu ayarlıyoruz */
        top: 0px;
        left: 0px;
        width: 30%; 
        padding: 0 10px 0 5px; 
        line-height: 31px;
        white-space: nowrap;
        background-color:#333;
        color:#fff;
    }
    
    
    /* 
        Oluşturduğumuz before alanına tablo başlıklarını ekliyoruz 
        nth-of-type parametresi ile kaçıncı td elementine ekleneceğini seçebiliriz
        her satır içindeki td elemanları ayrı bir küme olarak alındığından bir kere td:nth-of-type(x) şeklinde tanımlamanız yeterlidir
        son td elemanına geldiğinde sonraki satıra geçip tekrar ilk elemandan eklemeye başlayacaktır
    */
    .responsive-table td:nth-of-type(1):before { content: "Marka"; }
    .responsive-table td:nth-of-type(2):before { content: "Model"; }
    .responsive-table td:nth-of-type(3):before { content: "Fiyat"; }
}

Tablo kodlarımız:


    <table class="responsive-table">
        <thead>
        <tr>
            <th>Marka</th>
            <th>Model</th>
            <th>Fiyat</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Apple</td>
            <td>İphone 5</td>
            <td>4000 TL</td>
        </tr>
        <tr>
            <td>Apple</td>
            <td>İphone 10</td>
            <td>6500 TL</td>
        </tr>
        <tr>
            <td>Samsung</td>
            <td>J7</td>
            <td>990 TL</td>
        </tr>
        </tbody>
    </table>

Önizleme

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir