html - Quasar QMarkupTable th sticky header not working

Question

I am using Quasar's [QMarkupTable] (https://quasar.dev/vue-components/markup-table#Installation) and I am trying to make the header sticky but it isn't working.

.my-sticky-header-table
  /* height or max-height is important */
  height: 600px

  .q-table__top,
  .q-table__bottom,
  thead tr:first-child th
    /* bg color is important for th; just specify one */
    background-color: #fff

  thead tr th
    position: sticky
    z-index: 1
    top: 0
  thead tr:first-child th
    top: 0

  /* this is when the loading indicator appears */
  &.q-table--loading thead tr:last-child th
    /* height of all previous header rows */
    top: 48px

The HTML

<q-markup-table
      wrap-cells
      class="shadow-1 my-sticky-header-table"
      virtual-scroll
      :pagination.sync="pagination"
      :rows-per-page-options="[100]"
      separator="none"
    >
      <thead>
          <tr>
            <th>
            </th> 
            <th>
            </th>
          </tr>
     </thead>
     <tbody>
     </tbody>
  </q-markup-table>

Answer 1

等待大神答复