fixed header and scrollable body in table in html angular

Question

In Angular i have a table and it should be scrollable. But header should be fixed. but while scrolling header is not fixed. please help

i think issue is because i have added scroll for the entire div<>; but tried adding scroll for body also it didnt work — ruby
– ruby, Commented Jun 1, 2018 at 10:02
If your table body has a fixed height it's easy: thead, tbody { display: block;}tbody { overflow-y: scroll; height: 100px;} If not, the only thing I know can work is duplicate the table, one in a fixed div with a height,e.g. 1.5rem getbootstrap.com/docs/4.0/utilities/position/#fixed-top, and in a div that will see under the "fixed" — Eliseo
– Eliseo, Commented Jun 1, 2018 at 11:20

Charu Maheshwari · Accepted Answer · 2018-06-05 13:05:30Z

9

Well, the requirement seems to be you want a scrollable table body. Not sure if angular could makes things different anyhow in this case. Just to be sure, please see the fiddle at https://jsfiddle.net/hh6etg6s/ if this serves the purpose.

.tablediv {
  padding:20px;
}
table ,tr td{
    border:1px solid red
}
tbody {
    display:block;
    height:200px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}
table {
    width:400px;
}

edited Jun 5, 2018 at 13:05

answered Jun 1, 2018 at 12:36

Charu Maheshwari

1,6531 gold badge11 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Charu Maheshwari Over a year ago

Would appreciate if you would accept the answer too.

ruby Over a year ago

i have given fixed height for the table but when the result is only one then it seems like some blank space i mean the height of the table is not adjusting automatically. How to achieve that.

Charu Maheshwari Over a year ago

I have updated the fiddle to suit as per your requirement jsfiddle.net/hh6etg6s/2. And I again request you to please acknowledge the answer if you are satisfied.

ruby Over a year ago

Could you please help this post also : stackoverflow.com/questions/50903324/…

qube13 · Accepted Answer · 2022-12-16 14:47:47Z

3

Check out this post from angularjswiki: https://www.angularjswiki.com/material/mat-table-fixed-sticky-header/

Taken from there:

In Angular, To create a mat-table with fixed header and scrollable body, we have to add sticky input to the matHeaderRowDef.

answered Dec 16, 2022 at 14:47

qube13

1052 silver badges11 bronze badges

Comments

tylercuomo · Accepted Answer · 2020-09-10 17:36:03Z

1

Have two instances of your table in your HTML in separate divs. In the top container, hide your body. In your bottom container hide your headers. Do this with visibility: collapse;

If you need to hide the scrollbars:

Hide Scroll Bars

answered Sep 10, 2020 at 17:36

tylercuomo

111 bronze badge

Comments

marc_s · Accepted Answer · 2025-04-27 09:39:26Z

0

In addition to charu solution, I wanted the size to be dynamic, and not a fixed height size...

So I added this:

    table {
      border-collapse: separate;
      border-spacing: 0;
      display: grid;
      grid-template-rows: auto 1fr auto;
      height: 100%;
      overflow-y: auto;
    }

    tbody {
      display: block;
      overflow-y: auto;
      height: 100%;
    }

    thead, tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
    }

edited Apr 27 at 9:39

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Apr 2, 2024 at 21:03

Jeudry Peña Peña

11 bronze badge

Collectives™ on Stack Overflow

fixed header and scrollable body in table in html angular

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related