چگونه ایجاد می‌کنیم: جدول پاسخگو

یاد بگیرید که چگونه جدول پاسخگو ایجاد کنید.

جدول پاسخگو

اگر صفحه نمایش کوچک است و نمی‌توان تمام محتوا را نمایش داد، جدول پاسخگو یک نوار کشیدن افقی نمایش می‌دهد.

لطفاً اندازه پنجره مرورگر را تنظیم کنید تا تأثیرات را مشاهده کنید:

نام نام خانوادگی نقاط نقاط نقاط نقاط نقاط نقاط نقاط نقاط نقاط نقاط نقاط نقاط نقاط نقاط نقاط نقاط نقاط نقاط نقاط
Jill Smith 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50
Eve Jackson 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67

برای ایجاد یک جدول پاسخگو، یک شامل overflow-x:auto عنصر جعبه:

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

آزمایش کنید

توجه داشته باشید:در OS X Lion (Mac روی) نوار کشیدن به صورت پیش‌فرض مخفی است و فقط زمانی نمایش داده می‌شود که استفاده می‌شود (حتی اگر "overflow:scroll" یا auto تنظیم شده باشد).

相关页面

教程：CSS 表格