Hi masters,
I would like to check how to create the Horizontal scrollable table with fixing the 1st column and holding the vertical scrollable cell.
Since i got a long description content in my table, then I add the the following CSS to allow the vertical scroll.
However, when i add the following CSS to fix my first column (Name) , my vertical scroll change to horizontal one and 1st column also cannot fix.
Is there any way to allow Horizontal scrollable table with fixing the 1st column and holding the vertical scrollable cell?
Hi @Giselle Chen,
Can you try with the below CSS.
.table-scroll-wrapper {
overflow: auto;
max-width: 100%;
border: var(--border-size-s) solid var(--color-neutral-4);
position: relative;
}
.table-scroll {
margin: 0;
border: none;
border-collapse: separate;
border-spacing: 0;
width: 100%;
.table-scroll thead th {
position: -webkit-sticky;
position: sticky;
top: 0;
background: var(--color-neutral-0);
z-index: 3;
border-bottom: var(--border-size-s) solid var(--color-neutral-4);
.table-scroll tr td:first-child,
.table-scroll th:first-child {
left: 0;
z-index: 2;
border-right: var(--border-size-s) solid var(--color-neutral-4);
min-width: 150px; (Adjust as needed)
.table-scroll tbody td {
max-height: 100px;
overflow-y: auto;
vertical-align: top;
white-space: normal;
.table-scroll tr td:last-child {
border-right: none;
.phone .table-scroll tr td,
.tablet .table-scroll tr td {
.table-scroll *[data-expression] {
white-space: nowrap;
z-index: 4;
.table-scroll td {
padding: var(--space-s);
Hope it helps. If possible, please share your OML file so I can review it in more detail.
Thank you.
Hi Giselle Chen, I have attached the OML. Please check it.
A table where the first column is "pinned" like a sticky note on the left, while the rest of the table can scroll left-right and up-down — useful when you have lots of data but still want to always see the first column (like a name or label).
.dashboard-table.table-scroll {
margin: auto;
.dashboard-table.table-scroll table {
min-width: 1080px;
th:first-child,
td:first-child {
right: 0px;
.dashboard-table.table-scroll th:nth-first-child(2),
.dashboard-table.table-scroll td:nth-first-child(2) {
right: 90px;
.dashboard-table .table-wrapper {
max-height: 300px; /* Limit the height so you can scroll vertically */
overflow: auto; /* This enables scrollbars */
position: relative; /* Needed for sticky to work properly */
let's assume .dashboard-table as a frame where the table lies it is a Parent Class so that it cannot effect on other places where you have tables in your application.
th:first-child, td:first-child these classes we use to fix the position of the first column of header as well as row.
.table-wrapper class we have for vertical scroll in table.
I have Implemented the same for one of my project but that is for last column.
Thank You.
Hi @Giselle Chen
Refer this link table structure and CSS there:
https://codesandbox.io/p/sandbox/n4lmxt
I hope this help for you.
Thanks