Back

Technologies:

javascriptjavascript
csscss
avatar
Tolerim
25 days ago

How can I create a table with large data that has an outer vertical page scrollbar, inner horizontal table columns scrollbar, and fixed column headers?

enter image description here enter image description here

Is there a way to make table column headers sticky when scrolling vertically on a table that has an outer page vertical scrollbar and inner horizontal table columns scrollbar? I have already tried giving "overflow-y: hidden" and "overflow-x: auto" to the mat table, but it doesn't seem to be working. Is there a solution using CSS or JavaScript?

.mat-table-container {
    overflow-y: auto;
}
  
.mat-table {
   width: 1000px;
   overflow-x: scroll;
   overflow-y: hidden;
   border-collapse: collapse;
}
  
.mat-header-row {
   position: sticky;
   top: 0;
   z-index: 1;
   background: #fff;
}
Answers(2)
avatar
Vogi
24 days ago
Verified Answer
Yes, there is a way to make table column headers sticky when scrolling vertically on a table that has an outer page vertical scrollbar and inner horizontal table columns scrollbar. You can achieve this by setting the position property to “sticky” and specifying “0” as a value of the top property for the element. You can also set the display to “block” for both and element so that you can apply the height and overflow properties to . Here's an example CSS code snippet that you can use: 
.mat-header-row {
   position: sticky;
   top: 0;
   z-index: 1;
   background: #fff;
}
I hope this helps! Let me know if you have any other questions.
avatar
Tolerim
25 days ago
To achieve sticky column headers and a horizontal scrollbar in a table with a vertical outer scrollbar, you can use the CSS property sticky for the header row and set a z-index to ensure it stays on top of the rest of the table. Additionally, you need to set the width of the table to the combined width of the columns and set overflow-x: scroll on the table container. Here's an example of how to achieve this: 
.mat-table-container {
  overflow-y: auto;
}

.mat-table {
  width: 1000px; /* set the total width of the table */
  table-layout: fixed; /* optional - fixes column width */
}

.mat-header-row {
  position: sticky; /* makes the header row sticky */
  top: 0; /* position the header row at the top */
  z-index: 1; /* ensure the header row stays on top */
  background: #fff; /* optional - set the background color of the header row */
}

.mat-header-cell {
  position: sticky; /* makes the headers of the fixed columns sticky */
  left: 0; /* position the headers of the fixed columns at the left */
  z-index: 2; /* ensure the headers of the fixed columns stays on top of the other columns */
}

.mat-column-fixed {
  position: sticky; /* makes the cells of the fixed columns sticky */
  left: 0; /* position the cells of the fixed columns at the left */
  z-index: 1; /* ensure the cells of the fixed columns stay below the headers of the fixed columns */
}
Make sure to replace the .mat-table-container, .mat-table, .mat-header-row, .mat-header-cell, .mat-column-fixed, .mat-cell, and any other class selectors with the class names used in your table.
;