جدول واکنش گرا (Responsive Table)
«جدول واکنش گرا (Responsive Table)» یعنی جدول روی موبایل اسکرول افقی می گیرد و به هم نمی ریزد. کافی است جدول را داخل یک جعبه بگذاری و روی آن «سرریز افقی (overflow-x)» را فعال کنی. مثل وقتی دفترت کوچک است، خط کش را کمی می لغزانی.
روش استاندارد: اسکرول افقی با overflow-x
جدول را داخل یک div بگذار. سپس روی همان div مقدار «overflow-x: auto» تنظیم کن تا نوار اسکرول فقط وقتی لازم شد ظاهر شود.
<style>
.tablecontainer {
overflow-x: auto;
}
table {
border-collapse: collapse;
min-width: 700px;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
</style>
<div class="tablecontainer">
<table>
<tr>
<th>نام</th>
<th>نام خانوادگی</th>
<th>امتیاز</th>
<th>امتیاز</th>
<th>امتیاز</th>
<th>امتیاز</th>
</tr>
<tr>
<td>جیل</td>
<td>اسمیت</td>
<td>50</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
</table>
</div>
گام های عملی
- یک div دور جدول بگذار.
- روی div مقدار overflow-x: auto بده.
- برای خوانایی، padding و خط زیرین بگذار.
نکته: در برخی سیستم ها نوار اسکرول پنهان است و فقط هنگام اسکرول دیده می شود. اگر ظاهر نشد، محتوا را کمی به چپ بکش و امتحان کن.
پیوندها و ادامه کار
برای زیباترشدن جدول، به استایل جدول سر بزن. همچنین مرزبندی ها در مرزهای جدول توضیح داده شده اند. این صفحه جدول واکنش گرا مرجع اسکرول افقی است.
جمع بندی سریع
- جدول را در div بگذار.
- overflow-x را auto کن.
- min-width جلوی شکستن را می گیرد.
- اسکرول فقط وقت نیاز می آید.
- Padding خوانایی را بهتر می کند.