جدول | البيداغوجية

جدول

| 0 comments ]

<style>

.sky-table-container {

width: 100%;

margin: 20px 0;

direction: rtl; /* اتجاه الكتابة من اليمين لليسار */

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.sky-multi-table {

width: 100%;

border-collapse: separate;

border-spacing: 0 8px; /* مسافة بين الصفوف */

}

.sky-multi-table tr {

transition: transform 0.2s;

}

.sky-multi-table tr:hover {

transform: scale(1.01); /* تأثير بسيط عند تمرير الماوس */

}

.sky-multi-table td {

padding: 15px;

color: #ffffff;

font-weight: bold;

}

/* تنسيق خلية العنوان */

.title-cell {

border-radius: 0 10px 10px 0;

text-align: right;

font-size: 16px;

}

/* تنسيق خلية التحميل */

.download-cell {

border-radius: 10px 0 0 10px;

text-align: center;

width: 100px;

}

.download-btn {

background: rgba(255, 255, 255, 0.2);

color: white;

text-decoration: none;

padding: 8px 15px;

border-radius: 5px;

border: 1px solid #fff;

transition: 0.3s;

display: inline-block;

}

.download-btn:hover {

background: #fff;

color: #333 !important;

}

/* ألوان الصفوف الـ 10 */

.row-1 { background-color: #e74c3c; } /* أحمر */

.row-2 { background-color: #3498db; } /* أزرق */

.row-3 { background-color: #2ecc71; } /* أخضر */

.row-4 { background-color: #f39c12; } /* برتقالي */

.row-5 { background-color: #9b59b6; } /* بنفسجي */

.row-6 { background-color: #1abc9c; } /* فيروزي */

.row-7 { background-color: #d35400; } /* برتقالي غامق */

.row-8 { background-color: #2c3e50; } /* رمادي غامق */

.row-9 { background-color: #c0392b; } /* أحمر غامق */

.row-10 { background-color: #27ae60; } /* أخضر غامق */

@media screen and (max-width: 480px) {

.title-cell { font-size: 14px; padding: 10px; }

.download-cell { width: 80px; padding: 10px; }

.download-btn { padding: 5px 10px; font-size: 12px; }

}

</style>

<td class="title-cell">هنا يكتب عنوان المادة أو الملف رقم 1</td>