اجرا ❯
بازگشت
به
آموزشگاه
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html dir="rtl"> <head> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } tr:nth-child(even) {background-color: #f2f2f2;} </style> </head> <body> <h2>جدول واکنشگرا</h2> <p>یک جدول واکنشگرا اگر فضای کافی در صفحه ی نمایش نداشته باشد، یک نوار اسکرول افقی در آن نمایش داده می شود تا تمام محتوای آن نمایش یابد. پنجره ی مرورگر خود را تغییر اندازه دهید تا نتیجه را مشاهده کنید.</p> <p>برای ایجاد یک جدول واکنشگرا، آن را در داخل یک عنصر مثل div قرار دهید، و از دستور overflow-x:auto در div استفاده کنید:</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>
