Tüm tabloları responsive geçirebilmek için:
Şartlar:
1) Tablonun mutlaka th kısmı olmak zorunda.
2) Aşağıdaki kod ilgili yerlere dahil edilmek zorunda.
3) Tablo genişliği 100% olmak durumunda.
CSS
@media only screen and (max-width: 800px) {
body table,
body thead,
body tbody,
body th,
body td,
body tr {
display: block;
}
body thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
body tr {
border: 1px solid #ccc;
}
body td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align: left;
}
body td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
}
body td:before {
content: attr(data-title);
}
}
JS
$(document).ready(function () {
$("table").each(function () {
var nmtTable = $(this);
var nmtHeadRow = nmtTable.find("thead tr");
nmtTable.find("tbody tr").each(function () {
var curRow = $(this);
for (var i = 0; i < curRow.find("td").length; i++) {
var rowSelector = "td:eq(" + i + ")";
var headSelector = "th:eq(" + i + ")";
curRow.find(rowSelector).attr('data-title', nmtHeadRow.find(headSelector).html());
}
});
});
});
Çözümleme:
th etiketi içerisindeki değerlerin her birisi, aynı sütunda bulunan td etiketlerine data-title alt özelliği olarak atanmak durumunda. Atanan değerler css pseudo kod ile mobilde bölünen kısımlara başlık olarak atanıyor. JavaScript kodu editör kaynağına girip tek tek yazmak yerine th'lerin içerisindeki değerleri td'lere etiket olarak atıyor.
CK Editör ile birlikte kullanımı:
1) Tablo oluştura tıkla:
2) İhtiyaç olan sayı + 1 satır = toplam satır sayısı
3) Genişlik 100%
4) Başlık => İlk Satır olarak ayarla.