آموزش جدول های واکنشگرا در CSS

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

برای اینکه جدول شما، واکنشگرا شود، آن(عنصر <table>) را در داخل یک ظرف (مثل یک عنصر <div> ) قرار دهید و در این عنصر div، از دستور overflow-x:auto استفاده کنید تا جدول شما واکنشگرا شود؛ مانند مثال زیر:

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

<table>
... محتوای جدول ...
</table>

</div> 

نکته: در OS X Lion در Mac، نوارهای اسکرول به طور پیش فرض مخفی(hidden) هستند و تنها وقتی نمایش می یابند که مورد استفاده قرار گیرند(حتی اگر دستور overflow:scroll تنظیم شده باشد).

مثال های بیشتر

ایجاد یک جدول فانتزی

این مثال نشان می دهد که چگونه می توانیم یک جدول فانتزی ایجاد کنیم.

تنظیم موقعیت کپشن(عنوان یا caption) در یک جدول

این مثال نشان می دهد که چگونه، موقعیت عنوان یا کپشن جدول را مشخص کنیم.

ویژگی های جدول در CSS