104 lines
3.1 KiB
Plaintext
104 lines
3.1 KiB
Plaintext
|
الإخراج الحالي غير مقبول. المطلوب إصلاح جدول PDF بحيث يكون كل اجتماع داخل صف واحد فقط.
|
||
|
|
|
||
|
|
المشكلة الحالية:
|
||
|
|
- الوقت يظهر أحياناً في سطر مستقل فوق أو تحت الاجتماع.
|
||
|
|
- بعض الحضور يخرجون من صف الاجتماع.
|
||
|
|
- الصف لا يحافظ على نفس المحاذاة بين رقم الاجتماع، اسم الاجتماع، الحضور، والوقت.
|
||
|
|
- المطلوب أن يكون كل اجتماع عبارة عن <tr> واحد فقط يحتوي 4 خلايا:
|
||
|
|
رقم الاجتماع | اسم الاجتماع | الحضور | الوقت
|
||
|
|
|
||
|
|
مهم جداً:
|
||
|
|
لا تجعل الوقت أو الحضور عناصر منفصلة خارج صف الجدول.
|
||
|
|
كل بيانات الاجتماع يجب أن تكون داخل نفس tr.
|
||
|
|
|
||
|
|
الشكل المطلوب داخل HTML:
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td class="num-cell">6</td>
|
||
|
|
<td class="meeting-cell">اجتماع خاص</td>
|
||
|
|
<td class="attendees-cell">
|
||
|
|
<div class="attendees-inline">
|
||
|
|
<span class="attendee-item">-1 محمد خالد</span>
|
||
|
|
<span class="attendee-item">-2 سعيد عبدالله</span>
|
||
|
|
<span class="attendee-item">-3 طارق علي سعيد</span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td class="time-cell">10:30-10:40</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
ممنوع:
|
||
|
|
- ممنوع طباعة الوقت قبل tr أو بعد tr.
|
||
|
|
- ممنوع جعل الحضور div خارج td.
|
||
|
|
- ممنوع استخدام position:absolute داخل الجدول.
|
||
|
|
- ممنوع استخدام display:flex على tr أو table.
|
||
|
|
- ممنوع تقسيم الاجتماع الواحد إلى أكثر من tr.
|
||
|
|
|
||
|
|
CSS المطلوب:
|
||
|
|
|
||
|
|
@media print {
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
table-layout: fixed;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr {
|
||
|
|
page-break-inside: avoid;
|
||
|
|
break-inside: avoid;
|
||
|
|
}
|
||
|
|
|
||
|
|
th, td {
|
||
|
|
vertical-align: top;
|
||
|
|
padding: 6px 8px;
|
||
|
|
text-align: right;
|
||
|
|
white-space: normal;
|
||
|
|
overflow-wrap: break-word;
|
||
|
|
}
|
||
|
|
|
||
|
|
.num-cell {
|
||
|
|
width: 8%;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.meeting-cell {
|
||
|
|
width: 30%;
|
||
|
|
direction: rtl;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendees-cell {
|
||
|
|
width: 42%;
|
||
|
|
direction: rtl;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.time-cell {
|
||
|
|
width: 20%;
|
||
|
|
direction: ltr;
|
||
|
|
unicode-bidi: isolate;
|
||
|
|
text-align: center;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendees-inline {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 2px 14px;
|
||
|
|
direction: rtl;
|
||
|
|
text-align: right;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-item {
|
||
|
|
display: inline-block;
|
||
|
|
white-space: nowrap;
|
||
|
|
direction: rtl;
|
||
|
|
unicode-bidi: isolate;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
المطلوب النهائي:
|
||
|
|
كل صف اجتماع يظهر مثل النموذج المرجعي:
|
||
|
|
رقم الاجتماع واسم الاجتماع والحضور والوقت على نفس السطر الأساسي.
|
||
|
|
الحضور يكون inline داخل خانة الحضور، 3 إلى 4 أسماء تقريباً في السطر.
|
||
|
|
الوقت يبقى دائماً داخل عمود الوقت في نفس صف الاجتماع.
|