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

Asked

Viewed 69 times

0

Hello. I am using tablesort to sort my table every click I one of your headers. The problem is that the line "Total"

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

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

inserir a descrição da imagem aqui

Soon, I went back to my initial problem:

How do I make a part/line of the <tbody> static? Or some other approach.

                        <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>
html twitter-bootstrap table thymeleaf sortable

  • Possible duplicate of Tag thead pinned at the top and tbody with scroll bar in table in HTML

  • I didn’t get the part "keeps bouncing"... could explain better?

  • Sorry! What I meant was that when I click on the header to sort, the "Total" line exits the end of the table and enters the middle of the sort. I would like to make it static, so that when I click on the header, only the other lines are ordered.

1 answer

0

So I was able to come up with a solution for whoever was interested.

I separated the <tbody> in three different sizes (large - lg, small - Sm and mobile -Mb), 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 the <tfoot> with the same class.

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

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

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

That way I keep the static line on <tfoot> and apply the same responsiveness rules for <tfoot>. For some reason I thought we couldn’t apply classes to the tag <tbody>, turned out to be a very simple question.

Browser other questions tagged html twitter-bootstrap table thymeleaf sortable

You are not signed in. Login or sign up in order to post.