إذا كنت تستخدم الجداول على موقع الويب الخاص بك، فيجب أيضًا تكييفها مع الأجهزة المحمولة. أستخدم خيارين للتكيف - الضغط ولف الكلمات + ترتيب الجداول في عمود واحد.

الخيار الأول مناسب لجميع الجداول متعددة الأعمدة، والخيار الثاني أستخدمه في بعض المواقع في الواجهة الأمامية. يوجد مثل هذا الضعف في عرض القوائم على شكل جدول، لكن عندما تقل الدقة يتم ضغطها بشكل كبير مما يسبب سخطًا بين المستخدم. يعد التحويل إلى عمود واحد بدقة صغيرة حلاً جيدًا، ولكن مرة أخرى، لا يستحق استخدامه لجميع الجداول.

الخيار الأساسي

لذلك، بالنسبة لمعظم الجداول الموجودة على الموقع، أستخدم كود CSS التالي:

شاشة الوسائط و (الحد الأقصى للعرض: 1000 بكسل) (td (فاصل الكلمات: كسر الكل؛)

وهو يحدد أن الكلمات التي لا تتناسب مع الكتلة يجب أن تبدأ بسطر جديد إذا كانت الدقة أقل من 1000 بكسل. الدقة 1000 هي مثال، انظر إلى مواقعك، فمن المنطقي بالنسبة للبعض ضبط الدقة على مستوى أقل.

يمكنك تحقيق عرض جيد للجدول باستخدام الكود المزدوج في CSS. أستخدم بالتوازي:

شاشة @media و(max-width:700px)(img(max-width:96% !important;height:auto !important;) iframe، منطقة نصية، إدخال، زر، إرسال، فيديو، كائن، تضمين (max-width: 99% !مهم;) جدول، امتداد، div، ins(max-width:100% !important;)

تنص على أنه بدقة أقل من 700 بكسل، يتم عرض الجدول بحجم 100٪، أي أنه مضغوط، ولكنه يشغل الكتلة بأكملها في العرض. تشير الخاصية!important إلى أنها ستنطبق على كافة مستويات الدقة الأصغر من 700 بكسل.

التكيف في عمود واحد

من الصعب تعديل الجدول بحيث يتم عرضه في عمود واحد بدقة منخفضة. غير مناسب لجميع الطاولات، ولكنه ضروري في كثير من الأحيان. أولاً، حدد الفئة الأصلية للجدول، على سبيل المثال،

ثم يتم كتابة الكود في الأنماط:

@شاشة الوسائط فقط و(الحد الأقصى لعرض الجهاز: 320 بكسل) و(الحد الأدنى لعرض الجهاز: 320 بكسل) و(الحد الأقصى لعرض الجهاز: 600 بكسل) /* إجبار الجدول على ألا يكون مثل الجداول بعد الآن */ table.mceItemTable, table. mceItemTable thead، table.mceItemTable tbody، table.mceItemTable ال، table.mceItemTable td، table.mceItemTable tr ( العرض: كتلة; }

في هذه الحالة عرض: كتلة؛ يشير إلى أن tbody وth وtd وtr مقفلة في جداول mceItemTable. ونتيجة لذلك، وبدقة أقل من 600 بكسل، يتم إنشاء الجدول في عمود واحد، وهو في الواقع ليس جدولًا.

يعد استخدام الجداول بمثابة فطيرة أخرى في سلة راحة المستخدم، ولكن يجب عرضها بشكل صحيح على الأجهزة المحمولة، وإلا فإن النتيجة ستكون عكس ما كان متوقعًا - سوف يهرب الزوار من منحنيات الجدول ويتفاقم PF. لا أحد يمنع عرض الجداول في عمود واحد لجميع الجداول، والعكس صحيح، لكن المختلط أفضل، حسب ميزات تصميم الجدول.

ويندوز: إنترنت إكسبلورر 10.0+، فايرفوكس 1.5+، جوجل كروم، أوبرا 9.5+، سفاري 3.1+، سي مونكي 1.0+ [1].

لينكس: فايرفوكس 1.5+، جوجل كروم / كروميوم، أوبرا 9.5+، SeaMonkey 1.0+ [2].

إذا كان جدول HTML يحتوي على قدر كبير جدًا من البيانات، فسيصبح أكبر من المساحة المتوفرة على الصفحة ويبدأ في التجاوز. لمعالجة هذا الوضع، يمكنك إضافة التمرير الأفقي إلى الجدول. مثال:

1	2	3	4	5	6	7	8	9	10
Table_data_1	Table_data_2	Table_data_3	Table_data_4	Table_data_5	Table_data_6	Table_data_7	Table_data_8	Table_data_9	Table_data_10

HTML/XHTML. شفرة:

<طاولة>

<آر>

<ذ>1</ذ>

<ذ>2</ذ>

<ذ>3</ذ>

<ذ>4</ذ>

<ذ>5</ذ>

<ذ>6</ذ>

<ذ>7</ذ>

<ذ>8</ذ>

<ذ>9</ذ>

<ذ>10</ذ>

</tr>

<آر>

<td>Table_data_1</td>

<td>Table_data_2</td>

<td>Table_data_3</td>

<td>Table_data_4</td>

<td>Table_data_5</td>

<td>Table_data_6</td>

<td>Table_data_7</td>

<td>Table_data_8</td>

<td>Table_data_9</td>

<td>Table_data_10</td>

</tr>

</ طاولة>

طاولة(العرض: كتلة؛ تجاوز السعة-x: تلقائي؛)

/* CSS إضافي، فقط لإضفاء بعض المظهر على المثال: */

طاولة(انهيار الحدود: انهيار؛)

الجدول الدفتيريا، ال(الحشوة: 10 بكسل؛ الحد: 1 بكسل #000 صلب؛)

ملحوظة: خاصية CSS العرض: كتلةيجعل الجدول يشغل العرض الذي يحتاجه فقط ليحتوي على البيانات دون تشويه مرئي. لا أكثر، دون تمديد عرض المساحة المتوفرة على الصفحة بالكامل. حتى لو تم إضافة كود CSS العرض: 100%. مثال:

1	2	3
Table_data_1	Table_data_2	Table_data_3

Aliosque subditos et theme

قم بتوسيط عنصر ذو موضع مطلق أفقيًا باستخدام CSS. مثال: HTML/XHTML. شفرة:

CSS. الكود: .مثال (الموضع: نسبي؛ يسار: 0px؛ أعلى: 0px؛ ارتفاع: 90px؛ عرض: 100%؛ تعويم: يسار؛ الحشو: 10px؛ حد: 1px #ccc Solid؛ الخلفية: #fafafa؛ -moz-box -الحجم: صندوق الحدود؛ -حجم صندوق الويب: صندوق الحدود؛ -حجم الصندوق: حجم الصندوق: صندوق الحدود؛) مثال img (الموضع: مطلق؛ اليسار: 0px؛ right: 0px; Margin: 0px auto; width: 68px;) في المثال، يتم توسيط عنصر img ذو موضع مطلق، ولكن بشكل عام تعمل طريقة المحاذاة المركزية الأفقية هذه مع العناصر المضمنة الأخرى والمكتلة ذات الموضع المطلق أيضًا. يمكن أيضًا أن يكون عرض العنصر الذي تم وضعه بشكل مطلق بالنسبة المئوية أو وحدات القياس الأخرى. يمكن أن تكون خصائص CSS للحاوية (في المثال) التي يوجد بداخلها العنصر المحاذي للوسط مختلفة تمامًا؛ يتم إنشاء محاذاة المركز باستخدام الأنماط المرتبطة مباشرة بالعنصر: .example img (position:Absolute; left: 0px ؛ اليمين: 0 بكسل؛ الهامش: 0 بكسل تلقائي؛). [ 1 ] وأيضا في نتسكيب 8.01+، موزيلا 1.5+. [ 2 ] وأيضا في نتسكيب 8.01+، موزيلا 1.5+.

لا توجد خاصية "float: Bottom" في CSS، ولكن يمكن تحقيق التأثير بعدة طرق أخرى. مثال: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. إننا لا نسمح إلا بالحد الأدنى من النشاط الذي نمارسه من خلال العمل، ولا نتركه بعيدًا عن أي شيء يترتب على ذلك. Duis aute irure dolor in rerehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. باستثناء أن هناك رغبة غير متوقعة، فهو مذنب في أن المكتب يحرم من أن يكون هويته عملًا. الرابط 1 الرابط 2 الرابط 3 يطفو أسفل HTML / XHTML. شفرة:

CSS. الرمز: .box1 (الموضع: نسبي؛ أعلى: 0px؛ يسار: 0px؛ تعويم: يسار؛ الارتفاع: تلقائي؛ العرض: 100%؛) .content1 (الموضع: نسبي؛ أعلى: 0px؛ يسار: 0px؛ تعويم: يسار؛) الارتفاع: تلقائي؛ العرض: 100%؛) .left1 (الموضع: نسبي؛ الأعلى: 0px؛ اليسار: 0px؛ تعويم: اليسار؛ الارتفاع: تلقائي؛ العرض: 64%؛) .menu1 (الموضع: نسبي؛ الأعلى: 0px؛) left: 0px; float: left; height: auto; width: 36%;) .bottom1 (الموضع: مطلق; القاع: 0px; اليمين: 0px;) /* CSS إضافي، فقط لإضفاء بعض المظهر على المثال */ (اللون: #ddd؛ محاذاة النص: المركز؛).content1 (الخلفية: #bbb؛).left1 (الارتفاع الأدنى: 100 بكسل؛ الحشو: 2%؛ محاذاة النص: ضبط؛ الخلفية: #006؛ -moz - حجم الصندوق: مربع الحدود؛ -حجم صندوق الويب: مربع الحدود؛ -حجم الصندوق: حجم الصندوق: مربع الحدود؛) .menu1 (الحشوة: 2%؛ التعويم: يمين الخلفية: #060؛ -moz-box-sizing: border-box؛ -ms-box-sizing: border-box؛) القائمة 1 p (الموضع: نسبي؛ أعلى: 0px؛ يسار: 0px؛ تعويم: يسار؛ ارتفاع: آلي؛ العرض: 100%؛ الحشو: 0 بكسل؛ الهامش: 0px؛).menu1 a (اللون: #ddd؛ زخرفة النص: لا شيء؛).menu1 a:hover (زخرفة النص: تسطير؛).bottom1 (الحشوة: 2%؛ اللون: #eee؛ الخلفية: # 600؛) كل محتوى صفحة الويب موجود في حاوية box1. يوجد بداخلها حاويتان div: 1. content1 مع المحتوى الفعلي على اليسار وقائمة على اليمين. 2.bottom1 بعد المحتوى1.

إذا كانت الجداول قادرة على التكيف بشكل جيد مع دقة الشاشات المختلفة، فإن البشرية ستظل تقوم بتصميم تخطيطات الجدول حتى يومنا هذا. ما زلت أجد ذلك الوقت وأعرف ما أتحدث عنه.

ومع ذلك، نحن نعيش في زمن مختلف، فقد غرق تخطيط الجدول في غياهب النسيان، لكن الحاجة إلى استخدام الجداول الكلاسيكية على مواقع الويب لا تزال قائمة. لذلك لن ننكر وجود الجداول بل نتعرف على أبسط طريقة وهي كيفية جعل الجدول مستجيبا.

عرض الجدول المستجيب .

ترميز HTML

لقد أنشأنا بسيطة HTMLالجدول، طالما أنه يناسب الشاشة، كل شيء على ما يرام. عندما يتم تقليل عرض الشاشة، سيتم قطع الجدول ولن نرى بياناته، أو سيصبح صغيرًا جدًا ولن نرى أي شيء مرة أخرى.

ربما لاحظت أنني وضعت الجدول داخل العلامة شعبةومن الواضح لسبب ما. العلامة نفسها شعبةلا يعطي أي شيء حتى نقوم بتعيين الأنماط له.

أنماط CSS

من خلال تحديد خاصية واحدة فقط، الجدول يتكيف، سيظهر شريط تمرير أفقي تلقائيًا عندما يكون المحتوى داخل العلامة شعبةلن يتناسب بعد ذلك مع عرض الشاشة الحالي على طول المحور X.

القسم (
تجاوز السعة-x: تلقائي؛
)

لنقم بتصميم بقية علامات الجدول:

طاولة (
انهيار الحدود: انهيار؛ /* إظهار الأسطر المفردة فقط */
تباعد الحدود: 0؛ /* المسافة بين الخلايا */
العرض: 100%؛
الحدود: 1 بكسل صلب #afb42b؛
اللون: #212121؛
}

ث، د (
محاذاة النص: يسار؛
الحشو: 8 بكسل؛
}

تصميم العلامة آر(صف) يستحق تعليقا منفصلا. لقد أصبح من المعتاد بالفعل أن يكون لصفوف الجدول مظهر مخطط (حمار وحشي). يتم استخدام فئة زائفة لهذا الغرض :الطفلمع المعنى بين قوسين حتى. معنى حتى، يعين خصائص لجميع العناصر الزوجية، في حالتنا هذا هو لون الخلفية. وبالتالي، سيتم مخطط الجدول.

لا تتعامل جداول البيانات مع التصميم سريع الاستجابة بشكل جيد. لسوء الحظ، هذه اللحظة موجودة. يدور التصميم سريع الاستجابة حول تخصيص تصميمك ليناسب أحجام الشاشات المختلفة. فماذا يحدث عندما تكون الشاشة أضيق من الحد الأدنى لعرض جدول البيانات؟ يمكنك تصغير الجدول ورؤيته بالكامل، لكن حجم النص سيكون صغيرًا جدًا بحيث لا يمكن قراءته. أو يمكنك تكبير نقطة القراءة، ولكنك ستحتاج إلى التمرير عموديًا وأفقيًا و(للأسف) لعرض الجدول. يمكن أن تكون جداول البيانات واسعة جدًا، وهي كذلك بالتأكيد. يمكن جعل الجداول مرنة في العرض (الوزن = 100%)، لكن محتويات الخلايا يمكن أن تصبح ضيقة جدًا بحيث لا يمكن رؤيتها ببساطة.

من أجل تجنب هذه اللحظة غير السارة، يتم استخدام الجداول التكيفية. سيعرض هذا الجدول شريط تمرير أفقيًا إذا كانت الشاشة صغيرة جدًا بحيث لا تتمكن من عرض المحتوى بالكامل.

كيفية عمل جدول مستجيب باستخدام CSS

لإنشاء جدول سريع الاستجابة، قم بإضافة عنصر حاوية تجاوز-x: تلقائيحول

:

...