Как преобразовать таблицу слева, в таблицу 3 на 3, но с возможностью скролить её вниз

Рейтинг: 0Ответов: 1Опубликовано: 15.08.2023

введите сюда описание изображения

До стрелочки, это так как сейчас выглядит моя таблица, мне нужен вариант, после стрелочки. В общем надо уменьшить размер видимой таблицы, но добавить возможность скроллинга. Таблица реализована через тег table, скроллер не должен быть виден.

css javascript html
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

.container {
  width: 170px;
  height: 160px;
  overflow-y: auto;
}

table {
  position: sticky;
  top: 0;
  width: 150px;
  border-collapse: collapse;
}

td {
  width: 50px;
  height: 50px;
  text-align: center;
}

.container::-webkit-scrollbar {
  width: 0px;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <title>table</title>
</head>

<body>
  <div class="container">
    <table border="1">
      <tr>
        <td>0</td>
        <td>1</td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
        <td>7</td>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
      </tr>
      <tr>
        <td>12</td>
        <td>13</td>
        <td>14</td>
      </tr>
      <tr>
        <td>15</td>
        <td>16</td>
        <td>17</td>
      </tr>
    </table>
  </div>
</body>

</html>

Предлагаю такой вариант. Главное, сначала ткните мышкой на таблицу, а потом тяните вверх/вниз стрелками на клавиатуре или колесиком мышки