x
<html><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) с помощью <strong>overflow-x: auto</strong> вокруг элемента таблицы:</p><div style="overflow-x:auto;"> <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> <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>