جداول ریسپانسیو
جدول کامل
اولین راه برای پاسخگو بودن جدول این است که آن را با آن بپیچید <div
class="table-responsive"></div>. به این ترتیب جدول به صورت افقی قابل پیمایش
خواهد بود و تمام داده ها در صفحه های کوچکتر قابل دسترسی خواهند بود. همچنین می توانید اصلاح کننده
های زیر را به آن اضافه کنید table-responsive برای اعمال پیمایش افقی در عرض های
مختلف صفحه: -sm, -md,
-lg, -xl.
| نام | پست الکترونیک | دسترسی | عملیات | |
|---|---|---|---|---|
|
روز سوزان | client1@example.com | غیرفعال |
|
|
کارول وایت | client2@example.com | کسب و کار |
|
|
|
لورا کار | client3@example.com | VIP |
|
|
لوری مور | client4@example.com | شخصی |
|
|
ماری دانکن | client5@example.com | کسب و کار |
|
جدول جزئی
راه دوم برای استفاده کلاس های CSS ابزار پاسخگو برای پنهان کردن ستون ها در وضوح های مختلف صفحه. به این ترتیب می توانید ستون های کمتر مهم را پنهان کنید و با ارزش ترین ها را در صفحه نمایش های کوچکتر نگه دارید. در مثال زیر دسترسی ستون در صفحه نمایش های کوچک و بسیار کوچک قابل مشاهده نیست و پست الکترونیک ستون در صفحه نمایش های بسیار کوچک قابل مشاهده نیست.
| نام | پست الکترونیک | دسترسی | عملیات | |
|---|---|---|---|---|
|
ماری دانکن | client1@example.com | غیرفعال |
|
|
|
هلن جیکوبز | client2@example.com | کسب و کار |
|
|
|
هلن جیکوبز | client3@example.com | غیرفعال |
|
|
|
لیزا جنکینز | client4@example.com | آزمایشی |
|
|
|
آماندا پاول | client5@example.com | VIP |
|