How to stick the header?

[teodorro]

Is it possible to restrain a height of a component in a way that it will be possible to make the header sticky and the horizontal scroll be placed not under all rows?
Attaching a simple class like
.asd {
height: 200px;
overflow:auto;
}
to q-hierarchy is not a solution.
Could you help me?

[pratik227]

Hi @teodorro,

Try these.

<style>
.q-markup-table {
  height: 110px;
}

.q-markup-table thead tr th {
  background-color: #00b4ff;
  position: sticky;
  z-index: 1;
  top: 0;
}

.q-markup-table tbody {
  scroll-margin-top: 48px;
}

.q-markup-table.q-table--loading thead tr:last-child th {
  top: 48px;
}
</style>

Thanks,
Pratik Patel