Exécuter
❯
Exécuter le code
Ctrl+Alt+R
Enregistrer le code
Ctrl+Alt+A
Changer d'orientation
Ctrl+Alt+O
Changer de thème
Ctrl+Alt+D
<!DOCTYPE html> <html> <head> <style> div.tablecontainer { overflow-x: auto; } table { border-collapse: collapse; largeur: 100%; } table, th, td { bordure: 1px solide #ddd; padding: 8px; text-align: left; } </style> </head> <body> <h2>Tableau Réactif</h2> <p>A responsive table will display a horizontal scroll bar if the screen is too small to display the full content. Resize the browser window to see the effect:</p> <p>Pour créer un tableau réactif, ajoutez un élément conteneur (comme div) avec<strong>overflow-x:auto</strong>autour de l'élément table :</p> <div class="tablecontainer"> <table> <tr> <th>Prénom</th> <th>Nom de famille</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> <th>Points</th> </tr> <tr> <td>Jill</td> <td>Smith</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>Eve</td> <td>Jackson</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>Adam</td> <td>Johnson</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>