Html table with vertical scrolls

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.

Источник

HTML table with vertical and horizontal scrolling

Solution 2: Check this example: Solution 1: put the table inside div. something like The will create the scrollbar when neccessary. Solution 1: Here is a css code:

Vertical and horizontal scroll in Html table

I found a solution. We can use js plugin. sortable_table.js, fixed_table_rc.js

$('#fixed_hdr2').fxdHdrCol(< fixedCols: 1, width: "100%", height: 500, colModal: [ < width: 50, align: 'left' >, < width: 110, align: 'left' >, < width: 170, align: 'left' >, < width: 250, align: 'left' >, < width: 100, align: 'left' >, < width: 70, align: 'left' >, < width: 100, align: 'left' >, < width: 100, align: 'left' >, < width: 90, align: 'left' >, < width: 400, align: 'left' >], sort: true >); 

Html — Fixed header table with horizontal scrollbar and, Here’s a solution which again is not a CSS only solution.It is similar to avrahamcool’s solution in that it uses a few lines of jQuery, but instead of changing heights and moving the header along, all it does is changing the width of tbody based on how far its parent table is scrolled along to the right.. An added bonus with this solution is that it works with a semantically valid HTML table. Code samplesetTableBody();$(window).resize(setTableBody);$(«.table-body»).scroll(function () <$(".table-header").offset(< left: -1*this.scrollLeft >);>);Feedback

HTML table with vertical and horizontal scrolling

You could use position:absolute on a window.onscroll event and determine for window.pageYOffset or document.body.scrollTop , like:

//first the CSS #headerContainer < padding:0; position:relative; overflow:visible; >#header < margin:0; padding:0; position:absolute; top:0; left:0; z-index:99; >//now the JavaScript var win = window, doc = document, bod = doc.getElementsByTagName('body')[0]; function E(e) < return doc.getElementById(e); >var pT = 0; function nice(elementId, offsetParentTop) < var hs = E(elementId).style; var sy = win.pageYOffset || bod.scrollTop; if(sy !== pT)< pT = sy+offsetParentTop; hs.top = pT+'px'; >> onscroll = function()

You could use a series of Element.offsetTop attributes to determine your offsetParentTop argument. It really depends how deep you have your header.

Html — css: table scrollable both horizontally and vertically, Horizontal and vertical scrolling with sticky column headers using css only can be done with the following. A container div with overflow: scroll; A thead with position: sticky and inset-block-start: 0; Full example below:

Adding horizontal and vertical scrolling to a table

.scroll-table-container < border:2px solid green; height: 300px; overflow: scroll; >.scroll-table, td, th

   div table td td,th th  
 
ID
 
First Name
 
Last Name
 
 
 
 
 
1
 
John
 
Doe
 
 
2
 
Jane
 
Doe
 
 
3
 
Josh
 
Doe
 
 
4
 
Joana
 
Doe
 
 
 
   

Javascript — HTML table with vertical and horizontal, I’m not going to do you CSS for you, the alignment of column breaks as the number of columns increase and the header is fixed with respect to vertical scrolling of the page.I found a jquery implementation here where different columns could be of different width jsfiddle Scroll HTML table horizontal and …

Vertical and horizontal scrollable table

put the table inside div. something like

The overflow:auto will create the scrollbar when neccessary.

You could have a look at this solution:

(and you could try to Google before asking. 🙂

Css — HTML table scrolling vertical & horizontal, 1 Answer. This would be somewhat easy considering you are working with a table with fixed proportions. Simply create a DIV inside the column you’d like to scroll vertically and give it the fixed dimensions of your liking and append to it an ‘overflow-y:auto’ attribute. The verflow-y attribute will make sure only to present …

Источник

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.

Источник

Make HTML Table Scrollable

This article will introduce a method to make a vertically scrollable HTML table.

Set the CSS overflow-y Property to scroll to Make HTML Table Scrollable

When an HTML table is lengthy, a feature to scroll only the table, not the entire page, is needed. To achieve this functionality, we can use the overflow-y property.

Here, y represents the y axis. The property defines the overflow property of a block-level element along the vertical axis.

The scroll value makes the block-level element scrollable from top to bottom.

To make an HTML table vertically scrollable, we can wrap the table with a . Then, we can set a fixed height for the using the height property.

After that, we can set the overflow-y property to scroll . If the table height exceeds the height of the div we had set, then the overflow-y: scroll will make the table scrollable in the y-direction (vertically).

Therefore, we need to ensure that the height of the table exceeds the height of the .

For example, create a div and give it a class name of container . Inside that div , create a table and give it a class name of data .

Fill the table with data using tr , th , and td tags.

In CSS, select the container class and set its height property to 70px and its overflow-y property to scroll . Ensure the table contents have a height of more than 70px .

Next, select the table using the class selector and the table’s th and td elements. Then, set its border property to 1px solid black , border-collapse property to collapse and padding to 4px . (Note: This is not compulsory, this is to make the table more readable.)

The example below shows that the table is vertically scrollable, as the height of the table is more than that of the div or .container .

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; > 

As a result, the whole table is not visible as we load the page. It is because we have set 70px as the height of the container.

But when we scroll down vertically, we can see the rest of the table contents.

This way, we can make the HTML table vertically scrollable using the overflow-y property and setting it to scroll .

Related Article — HTML Table

Copyright © 2023. All right reserved

Источник