Position sticky works in Firefox, doesn't work in Chrome

Question

I am working on an admin panel website, and I've set the position on the table header to sticky. It seems to work fine in Mozilla Firefox, but it doesn't work in Chrome. I am using Materialize for the front end, and Laravel for the back end.

I've tried setting the .table-wrapper's position to relative, but it does nothing. No overflow or height property was set on any of the elements.

<table id="importuri-table" class="striped table-wrapper" res="înregistrarea">
    <thead>
      <tr>
        <th field="data">Data<i class="material-icons">sort</i></th>
        <th field="id">Nr. Fi<i class="material-icons">sort</i></th>
        <th field="status_plan">Status plan<i class="material-icons">sort</i></th>
        <th field="tip_transport">Tip trans<i class="material-icons">sort</i></th>
        <th field="transportator">Transportator<i class="material-icons">sort</i></th>
        <th field="autonr">Auto<i class="material-icons">sort</i></th>
        <th field="sofer">Sofer<i class="material-icons">sort</i></th>
        <th field="telefon">Telefon<i class="material-icons">sort</i></th>
        <th field="destinatie">Destinație<i class="material-icons">sort</i></th>
        <th field="valoare">Valoare<i class="material-icons">sort</i></th>
        <th field="valuta">Valuta<i class="material-icons">sort</i></th>
        <th width="200px">Actiuni</th>
      </tr>
      <tr>
        @for ($i = 0; $i < 11; $i++)
          <td>
            <div class="input-field">
              <input class="browser-default @if (in_array($i, [2, 3, 10])) autocomplete @endif" type="text" placeholder="Filtreaza dupa {{ ['dată', 'nr. FI', 'status plan', 'tip transport', 'transportator', 'nr. auto', 'șofer', 'telefon', 'destinație', 'valoare', 'valută'][$i] }}">
            </div>
          </td>
        @endfor

        <td><i class="material-icons blue-text resetfilter">autorenew</i></td>
      </tr>
    </thead>
    <tbody>
      @foreach ($importuri as $import)
        <tr>
          <td>{{ $import->data }}</td>
          <td>{{ $import->id }}</td>
          <td>{{ $import->status_plan }}</td>
          <td>{{ $import->tip_transport }}</td>
          <td>{{ $import->transportator }}</td>
          <td>{{ $import->autonr }}</td>
          <td>{{ $import->sofer }}</td>
          <td>{{ $import->telefon }}</td>
          <td>{{ $import->destinatie }}</td>
          <td>{{ $import->valoare }}</td>
          <td>{{ $import->valuta }}</td>
          <td>
            <a href="{{ route('importuri.edit', ['import' => $import->id]) }}"><i class="modal-trigger material-icons blue-text waves-effect waves-dark tooltipped" data-position="top" data-tooltip="Editează" href="#import-edit">edit</i></a>
            <i class="modal-trigger material-icons red-text waves-effect waves-dark tooltipped" data-position="top" data-tooltip="Șterge" href="#you-sure" action="{{ route('importuri.destroy', ['import' => $import->id]) }}">clear</i>
          </td>
        </tr>
      @endforeach
    </tbody>
  </table>

.table-wrapper {
  border: 1px solid #ddd;
  background-color: #fff;
  position: relative;

  > thead {
    background-color: #ddd;
    position: sticky;
    top: 0;
    z-index: 3;
  }
}

Answer 1

Try applying position: sticky; to th instead of thead. Example:

.table-wrapper {
    border: 1px solid #ddd;
    background-color: #fff;
    position: relative;

    > thead {   
        th{
            background-color: #ddd;
            z-index: 3;
            position: sticky;
            top: 0;
        }
    }
}