Исправлен заголовок с прокручиваемым div - PullRequest
Новая
       15

Исправлен заголовок с прокручиваемым div

0 голосов
/ 02 марта 2019

У меня есть таблица начальной загрузки с прокручиваемым div.Обтекание таблицы с помощью div помогает мне исправить проблемы с выравниванием th и td, но с этим заголовки таблицы также прокручиваются, и я хочу, чтобы они были исправлены.

  <div class="table-wrapper">
                            <table class="table" id="tblfiles">
                                <thead>
                                    <tr>
                                        <th data-field="Date" class="col-md-2" style="width:100vw;">Alert Date</th>
                                        <th data-field="Files" class="col-md-2" style="width:100vw;">Files</th>
                                        <th data-field="fileName" class="col-md-2" style="width:100vw;">Received Time</th>
                                        <th data-field="ReceivedTime" class="col-md-2" style="width:100vw;">Received Time</th>
                                        <th data-field="Delete" class="col-md-1" style="width:100vw;"></th>
                                    </tr>
                                </thead>
                                <tbody id="tblBodyFiles">
                                </tbody>
                            </table>
                            </div>

CSS 

.table-wrapper {
max-height: 200px;
overflow: auto; 
display: inline-block;

}

Все, что я хочу сейчас сделать, это сделать исправленный, спасибо большое.Помощь очень ценится

Ответы [ 2 ]

0 голосов
/ 02 марта 2019

Добавьте position:sticky к каждому th элементу.Вы должны сделать это с элементами th, а не с элементами thead или tr.Это должно начать вас: 

.table-wrapper {
  height: 120px;
  overflow: auto;
  border: 1px solid blue;
}

th {
  position: sticky;
  padding: 0px;
  top: 0px;
  background: white;
}
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
      </tr>
      <tr>
        <td>cell</td>
      </tr>
    </tbody>
  </table>
</div>
0 голосов
/ 02 марта 2019

Вы можете установить абсолютное положение строки thead и дать таблице дополнительный отступ, чтобы первый ряд не перемещался под ней.Таким образом, строка заголовка остается зафиксированной в верхней части таблицы. 

table {
  position: relative;
  padding-top: 20px;
}

thead {
  position: absolute;
  top: 0;
  left: 0;
}
...