在Firefox中定位粘性工作，在Chrome中不工作

Question

我正在一个管理面板的网站上工作，我已经将表格标题上的位置设置为粘性。它似乎在Mozilla Firefox中运行得很好，但在Chrome中却不起作用。我的前端是物化，后端是Laravel。

我尝试过将..table包装器的位置设置为相对的，但是它什么也不做。在任何元素上都没有设置溢出或高度属性。

<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

试着使用的位置:粘稠；到th，而不是头。示例：

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

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

Answer 2

我认为这个问题与您的头的任何父级有关，如回答这里，如果父服务器具有溢出的属性:隐藏、滚动、自动、粘性值无法工作，请搜索导致此问题的“父”属性，希望您将其修复。