Question

我正在管理面板网站上工作，并且已将表格标题上的位置设置为粘滞。在Mozilla Firefox中似乎可以正常工作，但在Chrome中则无法工作。我在前端使用Materialize，在后端使用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;
  }
}

Answer 1

尝试将位置：粘性； 应用于广告而不是广告。示例：

BillingResponse.OK

Answer 2

我认为此问题与您thead的任何父级有关，如回答here，如果该父级具有以下任何溢出属性：隐藏，滚动，自动，粘性值将不起作用，请搜索导致该问题的父级属性问题，希望您能解决它

位置固定功能在Firefox中有效，在Chrome中不起作用

2 个答案: