الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكود
<!DOCTYPE html> <html> <head> <style> table { width: 100%; border-collapse: collapse; } th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; } tr:nth-child(even) { background-color: #f1f1f1; } </style> </head> <body> <h1>Responsive Table</h1> <p>If the screen is too small to fit the table it will display a horizontal scroll bar.</p> <div style="overflow-x:auto;"> <table> <tr> <th>Id</th> <th>Role</th> <th>Username</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th>Country</th> <th>Score</th> </tr> <tr> <td>1</td> <td>Manager</td> <td>mhamad</td> <td>Mhamad</td> <td>Harmush</td> <td>mhamad.harmush@example.com</td> <td>Lebanon</td> <td>545</td> </tr> <tr> <td>2</td> <td>Editor</td> <td>hala</td> <td>Hala</td> <td>Hassan</td> <td>hala.hassan@example.com</td> <td>Egypt</td> <td>480</td> </tr> <tr> <td>3</td> <td>Writer</td> <td>aqlaa</td> <td>Aqlaa</td> <td>Al Rasheedy</td> <td>aqlaa.alrasheedy@example.com</td> <td>KSA</td> <td>425</td> </tr> <tr> <td>4</td> <td>Writer</td> <td>aqlaa</td> <td>Fadi</td> <td>Al Aswadi</td> <td>fadi-alaswadi@example.com</td> <td>Yaman</td> <td>710</td> </tr> </table> </div> <p>Note: If you use a big screen resize the browser window to see the effect.</p> </body> </html>
الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكودالصفحة الرئيسيةتحميل الكودتغيير الألوانتغيير العرضتغيير حجم العرضتشغيل الكود