ربما عندما أحصل على هذا الاسم في هذه المقالة ، سيسأل شخص ما: لماذا لا تزال تتبع الجداول؟ هذا قديم بالفعل ... اسرع XHTML ... DIV جيد ... UL جيد ... OL جيد ... DL جيد ... DL جيد ... هذا انتهى ، لا أعرف ما هو أفضل.
هل الجدول عفا عليها الزمن حقا؟ هل تعرف حقا الجدول؟ هل تستخدم الجدول حقًا؟
نحن لسنا ما يتعين علينا القيام به لخوض معركة شفهية ، لذلك دعنا نترك لأولئك الذين لديهم الكثير من الوقت.
العودة إلى الموضوع:
لا أتذكر عندما استخدم شخص ما جدولًا لمحاكاة DataGrid وقال ، لماذا لا يمكن إخفاء نصوص TD التي تتجاوز العرض الثابت ، ولكنها ستخفي الخط مباشرة؟
نعم ، هذا ، مثل:
قم بتشغيل الرمز على النحو الوارد أعلاه وستجد هذا النص في الخلية التي تتجاوز العرض الثابت لن يتم إخفاءها ، ولكن سيتم عرضها بخط جديد. من الواضح أن هذا ليس ما أعنيه.
يبدو أن هذا يبدو أنه ميزة في الجدول. لا يمكن أن يدعم مزيج {width:*px ؛ White-Space: Nowrap ؛ overflow: Hidden ؛} جيدًا. في التحليل النهائي ، لا يعمل الفضاء الأبيض: Nowrap ، لذلك يبدو أن الفائض: المخفي غير صالح. {ملاحظة: إذا كانت سلسلة من الشخصيات التي لا معنى لها ، فقد يصدر ساري المفعول. على سبيل المثال: <td class = col1> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </td> ، في هذا الوقت ، {white-space} كلمة بدون كسر خط ، لذلك سيتم إخفاء عرض COL1}
[الحل 1:]
في وقت لاحق ، ذكر أحدهم أن استخدام النسبة المئوية يكفي. بعد الاختبار ، من الممكن بالفعل. لقد قمت بتعديل أنماط عدة أسطر من الفقرة الأولى ، ويبقى الآخرون دون تغيير:
.col1 {العرض: 20 ٪ ؛}
.col2 {العرض: 40 ٪ ؛}
.col3 {العرض: 40 ٪ ؛}
بعد تشغيل الكود المعدل ، ستجد أن النص الذي يتجاوز العرض مخفي بالفعل ، ويبدو أن التأثير المطلوب يتم الحصول عليه.
في الواقع ، فإن استخدام النسبة المئوية لحل مشكلة إخفاء هذا النص ، ولكن يبدو أن هذا هو الحل الأفضل المطلوب ، لأننا في بعض الأحيان نحتاج إلى عرض ثابت ، وليس عرضًا مئويًا.
يكمن جذر كل هذا في كيفية عرض النص في الخلية في سطر واحد بدون خطوط ملفوف.
[الحل 2:]
لتلبية هذا المطلب ، بالإضافة إلى استخدام الأنماط ، قد نفكر أيضًا في ملصق لم نستخدمه لفترة طويلة. تتمثل وظيفة هذا العنصر في إجبار المحتوى على عرضه على سطر واحد. يتم تعديل الرمز أعلاه على النحو التالي ، ويبقى الآخرون دون تغيير:
<table border = 1 cellpacing = 0 summary = انظر إلى الوراء وألقي نظرة على الجدول: TD يلعب أيضًا الفائض: مخفي>
<tr>
<td class = col1> <bolr> Shenzhou Elegant Q400N </blbr> </td>
<td class = col2> <bolr> Q400N الأنيق ، باستخدام معالج Intel Core2 (merom) T5450 (1.66g) </nobr> </td>
<td class = col3> <bolr> xunchi 4 ، فعالية التكلفة المتميزة ، المظهر الجميل </nobr> </td>
</r>
</table>
بعد إجراء هذا التعديل ، ستجد أن التأثير يتحقق بالفعل. هل يجب أن تكون متحمسًا؟ لا ، لا يبدو أن هذا هو الحل الأفضل ، لأنه بعد كل شيء ، من غير السار بعض الشيء استخدام علامة عنصر لم يتم استخدامه لفترة طويلة ولا ينصح به.
بعد هذه الفكرة ، فكرت في هذه المشكلة من منظور مختلف ووجدت أنه يمكن حل المشكلة بسهولة.
نظرًا لأننا لا نستطيع ببساطة إضافة مساحة بيضاء: nowrap إلى th و td في خلية عرض ثابت ، فماذا عن إضافة عنصر علامة آخر إلى خلية عرض ثابت؟
أفضل حل:
سيجد تشغيل الكود أعلاه أن هذا النهج على ما يرام ، ومن حيث بساطة الكود وسهولة القراءة وعقلانية ، فهو أفضل من الحلول السابقة.
{يمكن للطلاب الذين لم ينجزوا إخفاء المحتوى الذي يتجاوز العرض الثابت للخلايا أن يلعبوا على الجهاز أولاً ، ثم قراءة هذه المقالة}
في الواقع ، الجدول هو شيء مثير للاهتمام وقابل للعب. يجب ألا ننظر إليها بعيون ملونة لأنها لها سبب خاص بها.
سأستمر في كتابة بعض المقالات حول الجداول في وقت لاحق ، وأعمل أيضًا بمثابة تخصيص ذاتي.