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>
<div class="lightbox-wrapper"><a class="lightbox" href="/uploads/3X/6/1/6199f9f6c756c9de3fc0a088a545dbdc0a8898a1.jpg_.webp" data-download-href="/uploads/default/6199f9f6c756c9de3fc0a088a545dbdc0a8898a1" title="2012/10/19/ae47f6e80e8dc620cb30da4209975d66_151143.jpg_"><img src="/uploads/3X/6/1/6199f9f6c756c9de3fc0a088a545dbdc0a8898a1.jpg_.webp" width="690" height="500"><div class="meta">
<svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use xlink:href="#far-image"></use></svg>2012/10/19/ae47f6e80e8dc620cb30da4209975d66_151143.jpg_818×213 39.7 KB<svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use xlink:href="#discourse-expand"></use></svg>
</div></a></div>