Bu haftaki dersimizde TablePress ile WordPress siteniz için tablo oluşturcağız. Dersimde CSS stilleri, Butonlar ve Resimler ekleyerek tamamen duyarlı hale getirmeyi öğreneceksiniz, böylece masaüstü, table ve küçük ekranlarda yapmış olduğunuz tablonunuzun güzel görünmesini sağlayacaksınız. Eklenti kurulumundan başlayarak temel kullanımını kapsayarak, özel CSS sınıflarıyla birlikte eklentinin gelişmiş yapılandırmasına inerek ders videomuyu sonlandırıyorum.
Eklentiler :
CSS kodu :
/* Düğme */
.tablepress td.column-5 a {
padding: 5px 15px;
background-color: black;
border-radius: 5px;
color: #fff;
}
/* Ortalama*/
.tablepress td {
vertical-align: middle;
}
/* Mobil */
.dataTables_wrapper .tablepress {
width: 100% !important;
white-space: nowrap;
}
/* Tablo Style*/
.tablepress th {
background: #3a3a3a;
color: #fff;
}
.tablepress .sorting:hover,
.tablepress .sorting_asc,
.tablepress .sorting_desc {
background-color: #727272;
color: #fff;
}
Mobil CSS kodu
@media screen and (max-width: 700px) {
table td {
font-size: 13px;
}
table .column-1 img {
width: 60px;
}
}
