جدول استجابة CSS
جدول مستجيب
سيعرض الجدول سريع الاستجابة شريط تمرير أفقي إذا كانت الشاشة صغيرة جدًا لعرض المحتوى الكامل:
الاسم الاول | اسم العائلة | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
جيل | حداد | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
حواء | جاكسون | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
آدم | جونسون | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
أضف عنصر حاوية (مثل <div>) overflow-x:auto
حول عنصر <table> لجعله مستجيبًا:
مثال
<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>
ملاحظة: في OS X Lion (في Mac) ، يتم إخفاء أشرطة التمرير افتراضيًا ولا تظهر إلا عند استخدامها (على الرغم من تعيين "overflow: scroll").
مزيد من الأمثلة
هذا المثال كيفية إنشاء طاولة فاخرة.
هذا المثال كيفية وضع التسمية التوضيحية للجدول.
خصائص جدول CSS
Property | Description |
---|---|
border | Sets all the border properties in one declaration |
border-collapse | Specifies whether or not table borders should be collapsed |
border-spacing | Specifies the distance between the borders of adjacent cells |
caption-side | Specifies the placement of a table caption |
empty-cells | Specifies whether or not to display borders and background on empty cells in a table |
table-layout | Sets the layout algorithm to be used for a table |