Заголовок таблицы при прокрутке

334

14 марта 2018, 04:52

Работаю с таблицей.
Хочу чтобы строка с заголовками при прокрутке страницы спускался и пользователь при работе с таблицей всегда видел заголовки столбцов. Пробовала реализовать это с помощью position: fixed; и position: relative;.
Проблема в том, что заголовочная строка отделяется от основной таблицы и столбцы с данными сужаются до размеров текста в них (не ориентируясь на th). Хочу сделать что-бы эта строка всегда была на месте, но при прокрутке скрола как-то копировалась, что-ли, и была вверху той части таблицы, на которой находится пользователь.
Подскажите, какими методами можно реализовать подобное? Спасибо.

Answer 1

table { 
  width: 500px; 
  border-collapse: collapse; 
 }  
  
  
table td:nth-child(1),  
table th:nth-child(1) { min-width: 150px; text-align: left } 
  
table td:nth-child(2), 
table th:nth-child(2) { min-width: 150px; text-align: left} 
  
table td:nth-child(3), 
table th:nth-child(3) { min-width: 100px; text-align: left} 
 
table td:nth-child(4), 
table th:nth-child(4) { width: 100px; text-align: left} 
 
table  thead { 
    background-color: #333; 
    color: #FDFDFD;    
  } 
   
table thead tr { 
      display: block; 
      position: relative; 
} 
 
table tbody { 
    display: block; 
    overflow: auto; 
    width: 100%; 
    height: 300px;    
} 
 
table tbody tr:nth-child(even) { 
      background-color: #DDD; 
}

<table> 
    <thead> 
      <tr> 
        <th>Заголовок1</th> 
        <th>Заголовок2</th> 
        <th>Заголовок3</th> 
        <th>Заголовок4</th> 
      </tr> 
    </thead> 
    <tbody> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
      <tr> 
        <td>abc</td> 
        <td>defghijklmnopqrs</td> 
        <td>tuv</td> 
        <td>wxyz</td> 
      </tr> 
    </tbody> 
  </table>