Boa tarde!
Estou usando Datatable e tenho uma tabela com dados tabulares onde o cabeçalho rola verticalmente juntamente com o corpo da tabela.
Preciso que ao rolar o scroll na vertical o cabeçalho permaneça Fixo e visível no topo da tabela e na horizontal ele acompanhe a rolagem
As colunas são ajustadas dinamicamente conforme texto e os registros serão carregados do banco, ou seja, não sei qual sua quantidade.
Preciso que a tabela receba o layout pré-definido.
Estou utilizando HTML5, CSS3 e JavaScript. Na imagem fica mais claro o meu objetivo.
Abaixo o código da table que estou utilizando:
<div class=“painel-controle”>
<section id=“painel-grid”>
<header>
<h1>Grid</h1>
</header>
<div class=“content”>
<table>
<thead>
<tr>
<th>Coluna1</th>
<th>Coluna2</th>
<th>Coluna3</th>
<th>Coluna4</th>
<th>Coluna5</th>
<th>Coluna6</th>
<th>Coluna7</th>
<th>Coluna8</th>
<th>Coluna9</th>
<th>Coluna10</th>
<th>Coluna11</th>
<th>Coluna12</th>
<th>Coluna13</th>
<th>Coluna14</th>
<th>Coluna15</th>
<th>Coluna16</th>
<th>Coluna17</th>
<th>Coluna18</th>
<th>Coluna19</th>
<th>Coluna20</th>
<th>Coluna21</th>
<th>Coluna22</th>
<th>Coluna23</th>
<th>Coluna24</th>
<th>Coluna25</th>
<th>Coluna26</th>
</tr>
</thead>
<tbody>
<tr>
<td><select class=“classificacao”>
<option value="">Nenhuma</option>
<option value=“vermelha” selected=“selected”>Classificação
Vermelha</option>
<option value=“amarela”>Classificação Amarela</option>
<option value=“verde”>Classificação Verde</option>
</select></td>
<td class=“ignicao-ligada”>Ligada</td>
<td>Produto1.1</td>
<td>Produto1.2</td>
<td>Produto1.3</td>
<td>Produto1.4</td>
<td>Produto1.5</td>
<td>Produto1.6/h</td>
<td>Produto1.7</td>
<td>Produto1.8</td>
<td>Produto1.9</td>
<td>Produto1.10</td>
<td>Produto1.11</td>
<td>Produto1.12</td>
<td>Produto1.13</td>
<td>Produto1.14</td>
<td>Produto1.15</td>
<td>Produto1.16</td>
<td>Produto1.17</td>
<td>Produto1.18</td>
<td>Produto1.19</td>
<td>Produto1.20</td>
<td>Produto1.21</td>
<td>Produto1.22</td>
<td>Produto1.23</td>
<td>Produto1.24</td>
</tr>
.
.
.
</tbody>
</table>
</div>
</section>
</div>
