Tabele Responsive CSS
Un tabel responsiv afișează o bară de derulare orizontală atunci când ecranul este prea mic pentru a încadra întregul tabel.
Pentru a crea unul, încadrați <table> într-un container <div> și setați overflow-x: auto pe acel <div>.
Notă: Pe macOS, barele de derulare sunt ascunse implicit și apar doar când sunt folosite, chiar și atunci când derularea overflow este setată.
Exemplu
Un tabel lat încadrat într-un div cu overflow-x: auto derulează lateral pe ecrane mici.
Prompt
O pagină HTML cu un tabel responsiv care derulează orizontal pe ecrane mici.
Într-un bloc intern
<style>, stilizați un tabel (borduri unite, lățime completă, celule cu padding și bordur) și adăugați o regulă div.tablecontainer cu overflow-x: auto. În corp, încadrați un tabel lat (multe coloane) într-un div cu clasa "tablecontainer". Pe o fereastră îngustă, tabelul ar trebui să primească o bară de derulare orizontală.
Output: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
div.tablecontainer {
overflow-x: auto;
}
</style>
</head>
<body>
<h2>Responsive Table</h2>
<p>Resize the browser window to see the effect. A horizontal scrollbar appears when the screen is too small.</p>
<div class="tablecontainer">
<table>
<tr><th>First Name</th><th>Last Name</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></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></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></tr>
</table>
</div>
</body>
</html>