Исправлен заголовок таблицы в прокручиваемом div с большим количеством тел - PullRequest
Новая
       24

Исправлен заголовок таблицы в прокручиваемом div с большим количеством тел

0 голосов
/ 31 октября 2018

Последние 3 дня я пытался зафиксировать теаду моего стола внутри прокручиваемого элемента div, но не смог.

У меня есть таблица в следующем формате: 

<div class='div_container'>
<table id='table'> 
<thead>
<tr>
<th>header 1</th>
<th>header 2</th>
<th>header 3</th>
<th>header 4</th>
</tr>
</thead>
<tbody>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
<tbody>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr class='resultsRow'>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>

Я пытаюсь зафиксировать заголовки в верхней части div, но единственное, что я получаю (кроме полного отказа), это исправление thead, но оно выходит из полей div.

Есть идеи как это исправить?

Я пытался использовать CSS и js, но опять не повезло.

Мой CSS пока: 

.div_container{
    overflow: scroll;
    display: block;
    height: 600px;
    margin-left: 10%;
    margin-right: 10%;    
}

#table tbody .resultsRow td {
    text-align: center;    
}

thead {
      position: sticky;
       /* display: block; */
}

1 Ответ

0 голосов
/ 31 октября 2018

Попробуйте это чистое решение css с фиксированным заголовком таблицы, используя position: sticky; 

div {
  display: inline-block;
  height: 200px;
  overflow: auto
}

table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

table {
  border-collapse: collapse;
}

th {
  background-color: #ddd;
  color: #fff;
}

th,
td {
  padding: 1em .5em;
}

table tr {
  color: #212121;
}
<div>
  <table>
    <thead>
      <tr class="header">
        <th>header 1</th>
        <th>header 2</th>
        <th>header 3</th>
        <th>header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
  </table>
</div>
...