How to make a "part" / line of the tbody be static on a responsive table?

Question

How to make a "part" / line of the tbody be static on a responsive table?

Navigation

#1 by (0 votes)

0

Hello. I'm using tablesort to sort my table with each click I one of its headers. The problem is that the "Total" line

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

was jumping along with the ordering. To solve this I put it in a <tfoot> , which made it static, but it also messed up the responsiveness of the window.

So,Icamebacktomyinitialproblem:

HowdoImakeapart/lineof<tbody>static?Orsomeotherapproach.

<tbodyclass="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>

html twitter-bootstrap sortable table thymeleaf

asked by anonymous 11.07.2018 / 16:09

1 answer

Problem in get in Node Express method how to call a django application through wordpress

score 0 · Answer 1

So I managed to make a solution for anyone who was interested.

I separated the <tbody> into three different sizes (large - lg, small - sm and mobile - mmb) according to window size.

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

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

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

And then I put <tfoot> with the same class.

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

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

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

This way I keep the static line in <tfoot> and apply the same rules of responsiveness to <tfoot> . For some reason I did not think I could apply classes to the <tbody> tag, it turned out to be a pretty simple question.