كيفية إنشاء جداول سريعة الاستجابة باستخدام CSS خالص باستخدام وحدة تخطيط الشبكة

TL ؛ DR

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

في هذه المقالة ، أستخدم CSS Grid Layout Module و CSS Properties (وليس Javascript) لتخطيط الجداول التي تلف الأعمدة اعتمادًا على عرض الشاشة ، والتي تتغير إلى بطاقة بناءً على تخطيط الشاشات الصغيرة.

بالنسبة للصبر ، انظر إلى القلم التالي لتنفيذ نموذج أولي.

القليل من تاريخ جداول HTML المتجاوبة

الجداول المستجيبة ليست موضوعًا جديدًا ، وهناك العديد من الحلول التي تم اقتراحها بالفعل. تم نشر "تقرير بيانات الجدول المستجيب" لأول مرة في عام 2012 من قبل كريس كويير ، وقد تم تلخيص الأشياء بدقة شديدة (بما في ذلك تحديث 2018).

يعرض كتاب "جداول مستجيبة حقًا باستخدام CSS3 Flexbox" بقلم Vasan Subramanian فكرة التفاف الأعمدة ، والتي تم تنفيذها باستخدام Flexbox.

على الرغم من اقتراح العديد من الأفكار المثيرة للاهتمام ، تختار مكتبات مثل bootstrap التمرير الأفقي للشاشات الصغيرة.

نظرًا لأن لدينا الآن CSS Grid ، أعتقد أنه يمكن أن يكون لدينا بديل مشترك أفضل للتمرير الأفقي.

جداول HTML

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

على سبيل المثال ، إليك جدول افتراضي لتفاصيل أمر الشراء ، قد تراه في تطبيق الشراء.

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

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

إعادة تعريف الجداول (= مجموعة العناصر)

لنبدأ بإعادة تعريف كيفية التعبير عن بيانات الجدول في HTML.

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


    
  1. # Part Number Part Description ...
  2. 1 100-10001 Description of part ...
  3. ...

تُستخدم Vanilla للتعبير عن سمات العنصر نظرًا لأن HTML5 لا تحدد علامة مناسبة لذلك. المفتاح هنا هو التعبير عن السمات المتشابهة لغويًا كتسلسل هرمي لـ. سيتم استخدام هذا الهيكل عند تحديد كيفية وضع البيانات. سأعود إلى هذا في القسم التالي حول موضوع التصميم.

أما بالنسبة للبيانات الفعلية داخل العنصر ، فإن العنصر الأول في القائمة هو الرأس ، وبقية العناصر هي البيانات الفعلية.

حان الوقت الآن لبدء الحديث عن تصميم العناصر باستخدام شبكة CSS.

مجموعات عنصر التصميم

الفكرة الأساسية هنا هي عرض جميع سمات العنصر كجدول عادي ، إذا سمح عرض العرض. يتمتع هذا التصميم برفاهية القدرة على رؤية أكبر عدد ممكن من العناصر (الصفوف).

عندما يصبح عرض الشاشة أضيق ، يتم تكديس بعض السمات رأسياً لتوفير مساحة أفقية. يجب أن يعتمد اختيار سمات التراص على:

  1. هل السمات منطقية عند تكديسها عموديًا؟ و ،
  2. عند التكديس عموديًا ، هل يوفر مساحة أفقية؟

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

الآن دعنا نتعمق في التفاصيل.

خطوة التصميم 1: الجدول الكامل

فيما يلي ملخص مرئي لكيفية تنفيذ الأشياء باستخدام CSS Grid.

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

لنبدأ بتعيين القائمة كحاوية شبكة عن طريق تحديد فئة تسمى .item-containerوتطبيقها على

  • (الصندوق الأحمر).

    .item-container { display: grid; grid-template-columns: 2em 2em 10fr 2fr 2fr 2fr 2fr 5em 5em; }

    عدد الأعمدة الصريحة المحددة بـ grid-template-columnsتسعة ، وهو عدد أعمدة المستوى الأعلى ، مباشرة تحتها

  • .

    يتم تحديد عرض العمود بالطول النسبي لجعل الأعمدة تلتف. يجب ضبط الكسر الفعلي بناءً على المحتوى.

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

    بعد ذلك ، نحدد حاوية شبكة أخرى تسمى حاوية شبكة أخرى .attribute-containerونطبقها على جميع الوحدات الوسيطة ضمن القائمة (المربع الأزرق).

    .attribute-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr)); }

    The minimum column width for all grid items under .attribute-container is specified with a CSS variable called --column-width-min(more on this later) using the minmax function, with the maximum set to take the rest of the space (e.g. one fraction). Since grid-template-columns are repeated, available horizontal space will be split into the maximum number of columns that could take at least --column-width-min, and the rest of the columns would go to the next line. The column’s width will be stretched if there is excess horizontal space because the repeat is auto-fited.

    Styling Step 2: Wrapping Table

    Next, --column-width-min needs to be specified independently for each column in order to wrap. Just to be clear, the variables need to be specified in order for the full table to render properly as well. To do this, a class is set for each .attribute-container, and a different --column-width-min is specified for each class scope.

    Let’s take a look at the HTML where .part-id is applied,

     Part Number Part Description 

    and the CSS:

    .part-id { --column-width-min: 10em; }

    This specific grid container will have two columns, as long as the available width is wider than 10em for each grid item (e.g. the grid container is wider than 20em). Once the grid container’s width becomes narrower than 20em, the second grid item will go to the next row.

    When we combine CSS properties like this, we need only one grid container .attribute-container, with the details changing where the class is applied.

    We can further nest .attribute-containers, to have multiple levels of wrapping with different widths, as in the following exert.

     Part Number Part Description Vendor Number Vendor Name .part-information { --column-width-min: 10em; } .part-id { --column-width-min: 10em; } .vendor-information { --column-width-min: 8em; }

    All of the above is enclosed in the following media query. The actual breakpoint should be selected based on the width necessary when your table is wrapped to the extreme.

    @media screen and (min-width: 737px) { ... }

    Styling Step Three: Card Layout

    The card layout will look like a typical form with attribute names in the first column and attribute values in the second column.

    To do this, a class called .attribute is defined and applied to all leaf tags under the

  • .

    .attribute { display: grid; grid-template-columns: minmax(9em, 30%) 1fr; }

    The attribute names are taken from a custom attribute of the leaf   called data-name, for example , and a pseudo-element is created. The pseudo-element will be subject to the grid container’s layout.

    .attribute::before { content: attr(data-name); }

    The first item in the list is the header and does not need to be displayed.

    /* Don't display the first item, since it is used to display the header for tabular layouts*/ .collection-container>li:first-child { display: none; }

    And finally, the cards are laid out in one column for mobile devices, but two for screens with a little bit more width, but not enough for displaying a table.

    /* 2 Column Card Layout */ @media screen and (max-width: 736px) { .collection-container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } ... } /* 1 Column Card Layout */ @media screen and (max-width:580px) { .collection-container { display: grid; grid-template-columns: 1fr; } }

    Finishing Notes

    Accessibility is an area that wasn’t considered at all and may have some space for improvement.

    If you have any ideas or second thoughts, please feel free to comment!

    And of course, thanks for reading.