جدول واکنش گرا
بازگشت به صفحه اصلی
بازگشت به صفحه مقاله
دو ستونی
دو سطری
اجرای کد RUN »
<!DOCTYPE html> <html> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: right; padding: 8px; } tr:nth-child(even){background-color: #f2f2f2} h2,table,p {direction:rtl;} </style> </head> <body> <h2>جدول واکنش گرا</h2> <p>در یک جدول واکنش گرا ، اگر صفحه نمایش خیلی کوچک باشد ، یک نوار اسکرول زیر جدول نمایش داده خواهد شد. اندازه مرورگر را تغییر دهید تا نتیجه را مشاهده کنید.</p> <p>برای ساخت یک جدول واکنش گرا ، یک عنصر نگه دارنده مانندد div ایجاد کرده و overflow-x:auto را برای آن تنظیم می کنیم و جدول را داخل این عنصر نگه دارنده قرار می دهیم.</p> <div style="overflow-x:auto;"> <table> <tr> <th> نام</th> <th> نام خانوادگی</th> <th>امتیاز</th> <th>امتیاز</th> <th>امتیاز</th> <th>امتیاز</th> <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> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> <td>50</td> </tr> <tr> <td>ابو ریحان </td> <td>دم دری</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> <td>94</td> </tr> <tr> <td>ابو ریحان</td> <td>درونی</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> <td>67</td> </tr> </table> </div> </body> </html>