Css table vertical scrolling

HTML CSS Vertical Scroll Table Example

How to get the contents inside of a table to scroll vertically with a fixed header. The CSS portion of this solution was provided by nkmol on stackoverflow.com.

Use the following in your css file or style tags.

div < display: inline-block; height: 350px; overflow: auto; width: 100%; >table th < position: -webkit-sticky; position: sticky; top: 0; >table < border-collapse: collapse; >th < background-color: #808080; color: #fff; >th, td < padding: 1em .5em; >table tr < color: #212121; >table tr:nth-child(odd)

The data table should look similar to the following:

 
  
 
 
Index
 
Ticker
 
Price
 
Changes
 
 
 
 
>
 
>
 
>
 
>
 
  
 
 
 

The rest of this how to article is not necessary. It is the rest of the code for getting major stock indexes.

If you do not have a service already, from your angular 2+ application root folder. Type type following CLI command in the terminal.

ng g s services/financial-stock

In your service file paste the following code.

import < Injectable >from '@angular/core'; import < HttpClient, HttpParams, HttpHeaders >from '@angular/common/http'; import < SharedService >from './shared.service'; export interface MajorIndexesResult < majorIndexesList: any; >@Injectable(< providedIn: 'root' >) export class YOUR-SERVICE-NAME < constructor(private http: HttpClient) < >getMajorIndexes() < const URL = 'https://financialmodelingprep.com/api/v3/majors-indexes'; console.log(URL); return this.http.get(URL); > >

In your component.ts file should have the following:

import < Component, OnInit, OnDestroy >from '@angular/core'; import < StockFmpService >from './../../../services/stock-fmp.service'; import < HttpErrorResponse >from '@angular/common/http'; import < Subscription >from 'rxjs'; export interface Entity < ticker: string; changes: number; price: number; indexName: string; >@Component(< selector: 'app-major-indexes-table', templateUrl: './major-indexes-table.component.html', styleUrls: ['./major-indexes-table.component.scss'] >) export class MajorIndexesTableComponent implements OnInit, OnDestroy < private subs = new Subscription(); public dataArr: any; constructor(private financeAPI: FinancialStockService) <>ngOnInit(): void < this.subs.add(this.financeAPI.getMajorIndexes() .subscribe((res) =>< this.dataArr = res.majorIndexesList; console.log('Data Array: ', this.dataArr); >, (err: HttpErrorResponse) => < console.log(err); >)); > ngOnDestroy(): void < if(this.subs) < this.subs.unsubscribe(); >> >

And the html and css at the beginning of this article for your CSS or SCSS and HTML files.

Источник

Making Tables Scrollable in CSS

Because HTML tables are set to display: table by default, adding scrollbars to them is a bit nonintuitive.

We can set our tables to display: block and modify their overflow from there, but I’ve found wrapping tables in containers to be more adaptable and flexible.

Link to this section

Vertical table scrollbars

First, let’s set up vertical scrolling.

div class="tableContainer"> table class="table"> . table> div> 

We can set a height for the table’s container and modify the table such that it will fit snug within the container:

.tableContainer < height: 300px; overflow: hidden; > .table < position: sticky; top: 0; width: 100%; > 

In this example, I set the height to 300px — but you can set it to whatever you want!

Our table will now have an inset vertical scrollbar and will expand no further than the height we set.

Link to this section

Horizontal table scrollbars

If you want to implement horizontal scrolling, there is an approach very similar to the vertical scrolling example:

.tableContainer < overflow: hidden; width: 800px; > .table < position: sticky; top: 0; width: 100%; > 

I set the width here to 800px , but again, you can change it to whatever you want.

If you want both horizontal and vertical scrollbars for your table, simply specify both a height and a width in .tableContainer .

Link to this section

And that’s how you can make your tables scrollable with just a bit of CSS!

I refer back to this snippet all the time, and I hope you found it useful too.

Источник

Создание таблицы HTML с вертикальной прокруткой внутри тега tbody

HTML и CSS предоставляют нам множество инструментов для создания и стилизации веб-элементов. Однако, иногда нам приходится сталкиваться с задачами, которые кажутся простыми на первый взгляд, но оказываются сложными при попытке их реализовать.

Одна из таких задач — создание таблицы с вертикальной прокруткой внутри тега . Возможно, вы захотите создать таблицу, которая бы занимала 100% ширины экрана, но при этом имела бы ограниченную высоту для тела таблицы ( ), с возможностью вертикальной прокрутки. Это может быть полезно, когда у вас в таблице много строк, и вы не хотите, чтобы она занимала слишком много места на странице.

Вот базовый пример такой таблицы:

 
 
 
Заголовок 1
 
Заголовок 2
 
  
Данные 1
 
Данные 2
 
 

Чтобы добавить прокрутку, можно воспользоваться свойством overflow: auto в CSS. Однако, просто применить это свойство к тегу не приведет к желаемому результату. Это связано с тем, что по умолчанию является блочным элементом, и свойство overflow не работает с такими элементами.

Вместо этого, мы можем применить некоторые дополнительные CSS-стили, чтобы заставить его работать:

table < width: 100%; >thead, tbody tr < display: table; width: 100%; >tbody

В этом примере мы задаем стиль display: block , чтобы сделать его блочным элементом, а затем применяем overflow: auto , чтобы добавить прокрутку. Обратите внимание, что мы также задаем высоту для , иначе прокрутка не будет работать.

Таким образом, можно создать таблицу с вертикальной прокруткой внутри , используя только HTML и CSS, без необходимости добавлять дополнительные элементы или использовать JavaScript.

Источник

Table Scroll With HTML and CSS

When a user designs a database to manage employee data in a company, most of the data and records cannot fit into a single sheet or table. To manage the data, the user makes the sheet scrollable. There are two types of “scrollable”. The first is vertically scrollable, and the second is horizontally scrollable. Horizontal scrollable allows the user to scroll the contents of the window left or right. Whereas the vertical scrollbar allows the user to scroll up or down the content.

Method 1: How to Table Scroll Horizontally With HTML/CSS?

To make a table scroll horizontally with the HTML/CSS, first, design a table by utilizing the “ ” element. Then, set the “height” and “width” of the table in CSS and apply the “overflow” property with the value “scroll”.

div class="container"> table class="data"> tr>  th>idth>  th>Nameth>  th>Countryth>  tr> tr>  td>1td>  td>John Doetd>  td>Nepaltd>  tr> tr>  td>2td>  td>Sam Smithtd>  td>Indiatd>  tr> tr>  td>3td>  td>Jack Danielstd>  td>Chinatd>  tr>  table>  div> 

.container   height: 70px;  overflow-y: scroll; > .data, th, td   border: 1px solid black;  border-collapse: collapse;  padding: 4px; >