Bulma css table with only tbody vertically scrollable

36 Views Asked by At

I am using Bulma CSS to style my rails 7 app, and I have a table that I want to make vertically scrollable, but only the tbody.

The Bulma docs mention the 'table-container' div wrapper to use together with 'is-scrollable', but that doesn't seem to have any effect on vertical scrolls, only horizontal.

I was able to modify the class in my 'application.css.sass' file to make the whole table scrollable, like this:

.table-container {
  max-height: 780px;
  overflow-y: auto;
}

How can I modify the css so only the tbody is scrollable (while fixing the header)?

Already tried:

.table-container tbody {
  overflow: hidden;
  max-height: 780px;

  tbody {
    display: block;
    overflow-y: auto;
    max-height: inherit;
  }
}

This didn't work because the display: block breaks the cell alignment.

0

There are 0 best solutions below