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

قبلی بعدی

جدول واکنش گرا (responsive table) در CSS

واکنش گرا کردن جدول یعنی همه ی دستگاه ها (مانند موبایل، تبلت، لپ تاپ) با سایز LCD مختلف، جدول را به درستی نمایش دهند.

نکته: چون جدول ها دارای عرض زیادی هستند که معمولا در موبایل، باعث به هم ریختگی سایت می شوند.

table {
    width: 100%;
    min-width:600px;
}

برای واکنش گرا (responsive) کردن جدول باید از ویژگی overflow-x:auto در تگ والد table استفاده کرد.

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

قبلی بعدی

توسعه دهندگان

احسان اسلامی