0

Olá. Eu estou usando tablesort para ordenar a minha tabela a cada clique eu um de seus headers. O problema é que a linha "Total"

<tr class="bg-info">
    <th colspan="1">TOTAL:</th>
    ...
</tr>

ficava pulando junto com a ordenação. Para resolver isso eu a coloquei em um <tfoot>, o que a tornou estática, mas também bagunçou a responsividade da janela.

inserir a descrição da imagem aqui

Logo, eu voltei para o meu problema inicial:

Como eu faço para que uma parte/linha do <tbody> fique estática? Ou alguma outra aproximação.

                        <tbody class="tbody-default-lg">
                            <tr th:each="c : ${companyStats}">
                                <td style="text-align: center; vertical-align: middle" th:text="${c.cliNi}"></td>
                                <td style="text-align: center; vertical-align: middle"><a th:text="${c.empreCod}" data-toggle="tooltip" th:title="${c.companyName}"></a></td>
                                <td style="text-align: center; vertical-align: middle"><div class="inside-cell-lg" th:text="${c.eventsBacklog}"></div><div class="inside-cell-sm" th:text="${'-'}"></div></td>
                                <td style="text-align: center; vertical-align: middle"><div class="inside-cell-lg" th:text="${c.eventsWaiting}"></div><div class="inside-cell-sm" th:text="${'-'}"></div></td>
                                <td style="text-align: center; vertical-align: middle"><div class="inside-cell-lg" th:text="${c.eventsSigned}"></div><div class="inside-cell-sm" th:text="${'-'}"></div></td>
                                <td style="text-align: center; vertical-align: middle"><div class="inside-cell-lg" th:text="${c.eventsBuilt}"></div><div class="inside-cell-sm" th:text="${c.lotsBuilt}"></div></td>
                                <td style="text-align: center; vertical-align: middle"><div class="inside-cell-lg" th:text="${c.eventsSent}"></div><div class="inside-cell-sm" th:text="${c.lotsSent}"></div></td>
                                <td style="text-align: center; vertical-align: middle"><div class="inside-cell-lg" th:text="${c.lotsRetries}"></div><div class="inside-cell-sm" th:text="${'-'}"></div></td>
                                <td style="text-align: center; vertical-align: middle"><div class="inside-cell-lg" th:text="${c.eventsToExport}"></div><div class="inside-cell-sm" th:text="${'-'}"></div></td>
                            </tr>

                     **** \/ ****
                            <tr class="bg-info">
                                <th colspan="1">TOTAL:</th>
                                <th style="text-align: center; vertical-align: middle" th:text="${companyStats.size()}"></th>
                                <th style="text-align: center; vertical-align: middle"><div class="inside-cell-lg" th:text="${SumBacklogPending}"></div><div class="inside-cell-sm" th:text="${'-'}"></div></th>
                                <th style="text-align: center; vertical-align: middle"><div class="inside-cell-lg" th:text="${SumPipeWait}"></div><div class="inside-cell-sm" th:text="${'-'}"></div></th>
                                <th style="text-align: center; vertical-align: middle"><div class="inside-cell-lg" th:text="${SumPipeSigned}"></div><div class="inside-cell-sm" th:text="${'-'}"></div></th>
                                <th style="text-align: center; vertical-align: middle"><div class="inside-cell-lg" th:text="${SumPipeBuilt}"></div><div class="inside-cell-sm" th:text="${SumPipeLotsBuilt}"></div></th>
                                <th style="text-align: center; vertical-align: middle"><div class="inside-cell-lg" th:text="${SumPipeSent}"></div><div class="inside-cell-sm" th:text="${SumPipeLotsSent}"></div></th>
                                <th style="text-align: center; vertical-align: middle"><div class="inside-cell-lg" th:text="${SumPipeMonitorRetries}"></div><div class="inside-cell-sm" th:text="${'-'}"></div></th>
                                <th style="text-align: center; vertical-align: middle"><div class="inside-cell-lg" th:text="${SumPipeEventsToExport}"></div><div class="inside-cell-sm" th:text="${'-'}"></div></th>
                            </tr>

                    **** /\ ****
                        </tbody>
3
  • Possível duplicata de Tag thead fixada no topo e tbody com barra de scroll em tabela no HTML
    – hugocsl
    11/07/2018 às 14:22
  • Não entendi a parte "fica pulando"... poderia explicar melhor?
    – Meu ovo
    11/07/2018 às 17:22
  • Desculpa! O que eu quis dizer foi que, quando eu clico no header para ordenar, a linha "Total" sai do final da tabela e entra no meio da ordenação. Eu gostaria de deixa-la estática, para que, quando eu clicar no header, só as demais linhas sejam ordenadas.
    – David
    11/07/2018 às 17:46

1 Resposta 1

0

Então, consegui fazer uma solução pra quem tiver interessado.

Separei o <tbody> em três tamanhos diferentes (large - lg, small - sm e mobile -mb), de acordo com a dimensão da janela.

<tbody class="tbody-default-lg">
...
</tbody>

<tbody class="tbody-default-sm">
...
</tbody>

<tbody class="tbody-default-mb">
...
</tbody>

E então botei o <tfoot> com a mesma classe.

<tfoot class="tbody-default-lg">
  ...
 </tfoot>

 <tfoot class="tbody-default-sm">
  ...
 </tfoot>

 <tfoot class="tbody-default-mb">
  ...
 </tfoot>

Desse jeito eu mantenho a linha estática no <tfoot> e aplico as mesmas regras de responsividade para o <tfoot>. Por algum motivo eu achava que não dava pra aplicar classes no tag do <tbody>, acabou por ser uma duvida bem simples.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .