113 lines
3.3 KiB
Plaintext
113 lines
3.3 KiB
Plaintext
|
المشكلة ما زالت موجودة في PDF:
|
||
|
|
الجدول لا يحافظ على الصف الواحد. بعض الخلايا مثل الوقت أو الحضور تظهر في سطر مستقل، وهذا خطأ.
|
||
|
|
|
||
|
|
المطلوب إصلاحه:
|
||
|
|
- كل اجتماع يجب أن يكون داخل صف واحد فقط <tr>.
|
||
|
|
- داخل نفس الصف يجب أن تكون الخلايا بالترتيب:
|
||
|
|
الرقم | الاجتماع | الحضور | الوقت
|
||
|
|
- ممنوع أن يظهر الوقت في صف مستقل.
|
||
|
|
- ممنوع أن يظهر الحضور في صف منفصل عن الاجتماع.
|
||
|
|
- ممنوع إنشاء <tr> جديد لمجرد أن النص طويل.
|
||
|
|
- النص الطويل يجب أن يلتف داخل نفس الخلية فقط، وليس ينقل الخلية لسطر جديد.
|
||
|
|
|
||
|
|
السبب المتوقع:
|
||
|
|
أنت تبني الجدول بطريقة خاطئة أو تستخدم div/flex داخل جسم الجدول، أو تتعامل مع الأسطر الطويلة كصفوف جديدة.
|
||
|
|
|
||
|
|
الحل المطلوب:
|
||
|
|
ابنِ PDF باستخدام table حقيقي:
|
||
|
|
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>#</th>
|
||
|
|
<th>الاجتماع</th>
|
||
|
|
<th>الحضور</th>
|
||
|
|
<th>الوقت</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>7</td>
|
||
|
|
<td>اجتماع بخصوص اعداد PDF</td>
|
||
|
|
<td>
|
||
|
|
<span>1- علي</span>
|
||
|
|
<span>2- طارق سعد محمد</span>
|
||
|
|
<span>3- عبدالله سلطان العلي</span>
|
||
|
|
<span>4- باسل محمد خالد</span>
|
||
|
|
</td>
|
||
|
|
<td>11:20-11:30</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
مهم جداً:
|
||
|
|
لا تستخدم display:flex على tr أو td.
|
||
|
|
لا تستخدم CSS grid للجدول.
|
||
|
|
لا تستخدم div كبديل للجدول.
|
||
|
|
لا تقسم الاجتماع إلى أكثر من tr.
|
||
|
|
النص الطويل يلتف داخل td فقط.
|
||
|
|
|
||
|
|
CSS إلزامي:
|
||
|
|
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
table-layout: fixed;
|
||
|
|
direction: rtl;
|
||
|
|
}
|
||
|
|
|
||
|
|
tr {
|
||
|
|
break-inside: avoid;
|
||
|
|
page-break-inside: avoid;
|
||
|
|
}
|
||
|
|
|
||
|
|
th, td {
|
||
|
|
padding: 0 4px !important;
|
||
|
|
margin: 0 !important;
|
||
|
|
line-height: 1.1 !important;
|
||
|
|
vertical-align: middle !important;
|
||
|
|
text-align: center;
|
||
|
|
white-space: normal;
|
||
|
|
overflow-wrap: break-word;
|
||
|
|
word-break: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
td:nth-child(1), th:nth-child(1) {
|
||
|
|
width: 8%;
|
||
|
|
}
|
||
|
|
|
||
|
|
td:nth-child(2), th:nth-child(2) {
|
||
|
|
width: 30%;
|
||
|
|
}
|
||
|
|
|
||
|
|
td:nth-child(3), th:nth-child(3) {
|
||
|
|
width: 42%;
|
||
|
|
}
|
||
|
|
|
||
|
|
td:nth-child(4), th:nth-child(4) {
|
||
|
|
width: 20%;
|
||
|
|
direction: ltr;
|
||
|
|
unicode-bidi: isolate;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendees-inline {
|
||
|
|
display: inline;
|
||
|
|
direction: rtl;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.attendee-item {
|
||
|
|
display: inline-block;
|
||
|
|
white-space: nowrap;
|
||
|
|
margin: 0 6px;
|
||
|
|
unicode-bidi: isolate;
|
||
|
|
}
|
||
|
|
|
||
|
|
الأهم:
|
||
|
|
أي اجتماع في البيانات يجب أن ينتج عنه <tr> واحد فقط.
|
||
|
|
لا تجعل التفاف النص ينشئ صفوف جديدة.
|
||
|
|
إذا كان هناك دمج rowSpan أو colSpan في النظام، طبقه على نفس <td> ولا تنشئ صفوف إضافية.
|
||
|
|
|
||
|
|
النتيجة المطلوبة:
|
||
|
|
الوقت، الاجتماع، الحضور، والرقم يظهرون دائماً في نفس صف الاجتماع، والنص يلتف داخل الخلية فقط.
|