Как сделать overflow для отдельной части таблицы?
Есть таблица, все элементы кроме Период, Доходность, Затраты на электричество, Чистая прибыль - должны быть вне скролла. Тоесть скролл будет у строк начиная с 2 элемента
<table class="table table-striped"> <thead> <tr> <th>Период</th> <th>День</th> <th>Месяц</th> <th>Год</th> </tr> </thead> <tbody> <tr> <td>Доходность</td> <td>$2.90</td> <td>$86.95</td> <td>$1,043.37</td> </tr> <tr> <td>Затраты на электричество</td> <td>$2.02</td> <td>$60.48</td> <td>$725.76</td> </tr> <tr> <td>Чистая прибыль</td> <td>$0.88</td> <td>$26.47</td> <td>$317.61</td> </tr> </tbody> </table> |
<table class="table table-striped"> <thead> <tr> <th>Период</th> <th>День</th> <th>Месяц</th> <th>Год</th> </tr> </thead> <tbody> <tr> <td>Доходность</td> <td>$2.90</td> <td>$86.95</td> <td>$1,043.37</td> </tr> <tr> <td>Затраты на электричество</td> <td>$2.02</td> <td>$60.48</td> <td>$725.76</td> </tr> <tr> <td>Чистая прибыль</td> <td>$0.88</td> <td>$26.47</td> <td>$317.61</td> </tr> </tbody> </table>
Дополнительно:
Не помню, где хорошая статья по этому поводу, вот первая попавшаяся из гугла https://tympanus.net/codrops/2014/01/09/sticky-tab...
Дальше продолжайте гуглить самостоятельно.
Мне нужно
С этим на фриланс.
В какую сторону гуглить я подсказала. Дальше вы можете показать, что вы делали и что именно не получилось. Желательно в песочнице на codepen.io, чтобы ваш код можно было потрогать.
Также можно гуглить не в гугле, а поискать на том же codepen. Рекомендую так и поступить.
Ответы:
Возможно вам подойдет моё решение. На большом экране таблица полность видна, на телефоне - первый столбик выделяется, к остальным добавляется прокрутка.
snippet
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания overflow для отдельной части таблицы в HTML можно использовать стиль CSS "overflow: auto;" для элемента
Пример кода:
.table-container { width: 300px; height: 200px; overflow: auto; } <div class="table-container"> <table> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> </tr> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> <!-- Дополнительные строки таблицы --> </table> </div>.table-container { width: 300px; height: 200px; overflow: auto; } <div class="table-container"> <table> <tr> <th>Заголовок 1</th> <th>Заголовок 2</th> </tr> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> <!-- Дополнительные строки таблицы --> </table> </div>
В данном примере создается контейнер с классом "table-container", в который вложена таблица. С помощью стиля "overflow: auto;" устанавливается автоматическая прокрутка в случае, если содержимое таблицы не помещается в заданный размер контейнера (300px x 200px). Таким образом, только содержимое таблицы внутри этого контейнера будет иметь полосы прокрутки, остальная часть страницы останется без изменений.
Таким образом, вы можете легко добавить overflow для отдельной части таблицы, чтобы обеспечить удобную навигацию по содержимому, которое не помещается на экране.