位置粘性在 Firefox 中有效，在 Chrome 中无效

debugcn 发表于 Dev

阿卡迪2k

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

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

<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;
  }
}

尚穆根圣达拉姆

尝试应用位置：粘性；到 th 而不是 thead。例子：

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。