2

Montei uma tabela com scroll horizontal e vertical a partir deste original http://jsfiddle.net/k5k7vtwu/:

document.querySelector('.ux-data-table').onscroll = function (e) {
  // called when the window is scrolled.
  var topOfDiv = Math.max(document.querySelector(".ux-data-table").scrollTop - 2, 0);
  document.getElementsByTagName('thead')[0].style = "top:" + topOfDiv + "px;";
}
.ux-data-table {
  width: auto;
  max-width: 100%;
  height: 200px;
  overflow: auto;
  float:left;
}
.ux-data-table1 {
  width: auto;
  max-width: 100%;
  height: 200px;
  overflow: auto;
  float:left;
}

/* Prevents the header from overflowing the scrollbars */
.ux-data-table-inner {
  position: relative;
}
.ux-data-table-inner1 {
  position: relative;
}

.ux-data-table table {
  width: 100%;
}
.ux-data-table1 table {
  width: 100%;
}

.ux-data-table table,
.ux-data-table th,
.ux-data-table td {
  background-color: black;
  color: white;
  border: 1px solid black;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
}
.ux-data-table1 table,
.ux-data-table1 th,
.ux-data-table1 td {
  background-color: black;
  color: white;
  border: 1px solid black;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
}

.ux-data-table thead {
  position: absolute;
}
.ux-data-table1 thead {
  position: absolute;
}

.ux-data-table tbody {
  margin-top: 20px;
  display:block;
}
.ux-data-table1 tbody {
  margin-top: 20px;
  display:block;
}
.ux-data-table td {
  background-color: white;
  color: black;
  border: 1px solid black;
}
.ux-data-table1 td {
  background-color: white;
  color: black;
  border: 1px solid black;
}
<h4>
 Tabela 1
</h4>
<div class='ux-data-table'>
  <div class='ux-data-table-inner'>
    <table>
      <thead>
        <tr>
<th>COLOCAÇÃO</th>
<th>Nº</th>
<th>NOME</th>
<th>CÓD. FAIXA ETÁRIA</th>
<th>COL. FAIXA ETÁRIA</th>
<th>TEMPO SWIM</th>
<th>T1</th>
<th>TEMPO BIKE</th>
<th>T2</th>
<th>TEMPO RUN</th>
<th>TEMPO TOTAL</th>
<th>EQUIPE</th>
        </tr>
      </thead>
      <tbody>
       <tr>
<td>1</td>
<td>12</td>
<td>MARCUS VINICIUS FERNANDES</td>
<td>M3034</td>
<td>–</td>
<td>00:11:32</td>
<td>00:00:29</td>
<td>00:45:36</td>
<td>00:00:29</td>
<td>00:22:01</td>
<td>01:20:07</td>
<td>MF ASSESSORIA ESPORTIVA</td>
</tr>
<tr>
<td>2</td>
<td>16</td>
<td>FELIPE JOSÉ MOLETTA</td>
<td>M3034</td>
<td>–</td>
<td>00:13:37</td>
<td>00:00:22</td>
<td>00:44:34</td>
<td>00:00:25</td>
<td>00:21:29</td>
<td>01:20:27</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>3</td>
<td>17</td>
<td>FERNANDO LUNARDELLI TOLDI</td>
<td>M3034</td>
<td>–</td>
<td>00:12:20</td>
<td>00:00:18</td>
<td>00:47:46</td>
<td>00:00:17</td>
<td>00:21:58</td>
<td>01:22:39</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>4</td>
<td>20</td>
<td>RAFAEL GOMES JURITI FERREIRA</td>
<td>M3539</td>
<td>–</td>
<td>00:14:55</td>
<td>00:00:15</td>
<td>00:45:58</td>
<td>00:00:26</td>
<td>00:24:54</td>
<td>01:26:28</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>5</td>
<td>13</td>
<td>RAUL FURTADO</td>
<td>M4044</td>
<td>–</td>
<td>00:13:34</td>
<td>00:00:27</td>
<td>00:46:59</td>
<td>00:00:30</td>
<td>00:25:08</td>
<td>01:26:38</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>6</td>
<td>18</td>
<td>HUGO AMARAL HORTA BARBOSA</td>
<td>M3034</td>
<td>–</td>
<td>00:13:26</td>
<td>00:00:40</td>
<td>00:48:38</td>
<td>00:00:26</td>
<td>00:25:01</td>
<td>01:28:11</td>
<td>FIBRATECH</td>
</tr>
<tr>
<td>7</td>
<td>21</td>
<td>JUSCELINO ADEODATO DE MIRANDA VASCO</td>
<td>M3539</td>
<td>–</td>
<td>00:14:40</td>
<td>00:00:25</td>
<td>00:50:36</td>
<td>00:00:22</td>
<td>00:25:41</td>
<td>01:31:44</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>8</td>
<td>23</td>
<td>GUSTAVO SLAIB CRUZ PEREIRA</td>
<td>M3539</td>
<td>–</td>
<td>00:14:55</td>
<td>00:00:25</td>
<td>00:51:53</td>
<td>00:00:30</td>
<td>00:26:03</td>
<td>01:33:46</td>
<td>GP COACHING</td>
</tr>
<tr>
<td>9</td>
<td>24</td>
<td>PETER PICHNOFF</td>
<td>M3539</td>
<td>–</td>
<td>00:14:55</td>
<td>00:00:19</td>
<td>00:53:30</td>
<td>00:00:43</td>
<td>00:26:30</td>
<td>01:35:57</td>
<td>GP COACHING</td>
</tr>
      </tbody>
    </table>
  </div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/>
<h4>
 Tabela 2
</h4>
<div class='ux-data-table1'>
  <div class='ux-data-table-inner1'>
    <table>
      <thead>
        <tr>
<th>COLOCAÇÃO</th>
<th>Nº</th>
<th>NOME</th>
<th>CÓD. FAIXA ETÁRIA</th>
<th>COL. FAIXA ETÁRIA</th>
<th>TEMPO SWIM</th>
<th>T1</th>
<th>TEMPO BIKE</th>
<th>T2</th>
<th>TEMPO RUN</th>
<th>TEMPO TOTAL</th>
<th>EQUIPE</th>
        </tr>
      </thead>
      <tbody>
       <tr>
<td>1</td>
<td>12</td>
<td>MARCUS VINICIUS FERNANDES</td>
<td>M3034</td>
<td>–</td>
<td>00:11:32</td>
<td>00:00:29</td>
<td>00:45:36</td>
<td>00:00:29</td>
<td>00:22:01</td>
<td>01:20:07</td>
<td>MF ASSESSORIA ESPORTIVA</td>
</tr>
<tr>
<td>2</td>
<td>16</td>
<td>FELIPE JOSÉ MOLETTA</td>
<td>M3034</td>
<td>–</td>
<td>00:13:37</td>
<td>00:00:22</td>
<td>00:44:34</td>
<td>00:00:25</td>
<td>00:21:29</td>
<td>01:20:27</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>3</td>
<td>17</td>
<td>FERNANDO LUNARDELLI TOLDI</td>
<td>M3034</td>
<td>–</td>
<td>00:12:20</td>
<td>00:00:18</td>
<td>00:47:46</td>
<td>00:00:17</td>
<td>00:21:58</td>
<td>01:22:39</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>4</td>
<td>20</td>
<td>RAFAEL GOMES JURITI FERREIRA</td>
<td>M3539</td>
<td>–</td>
<td>00:14:55</td>
<td>00:00:15</td>
<td>00:45:58</td>
<td>00:00:26</td>
<td>00:24:54</td>
<td>01:26:28</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>5</td>
<td>13</td>
<td>RAUL FURTADO</td>
<td>M4044</td>
<td>–</td>
<td>00:13:34</td>
<td>00:00:27</td>
<td>00:46:59</td>
<td>00:00:30</td>
<td>00:25:08</td>
<td>01:26:38</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>6</td>
<td>18</td>
<td>HUGO AMARAL HORTA BARBOSA</td>
<td>M3034</td>
<td>–</td>
<td>00:13:26</td>
<td>00:00:40</td>
<td>00:48:38</td>
<td>00:00:26</td>
<td>00:25:01</td>
<td>01:28:11</td>
<td>FIBRATECH</td>
</tr>
<tr>
<td>7</td>
<td>21</td>
<td>JUSCELINO ADEODATO DE MIRANDA VASCO</td>
<td>M3539</td>
<td>–</td>
<td>00:14:40</td>
<td>00:00:25</td>
<td>00:50:36</td>
<td>00:00:22</td>
<td>00:25:41</td>
<td>01:31:44</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>8</td>
<td>23</td>
<td>GUSTAVO SLAIB CRUZ PEREIRA</td>
<td>M3539</td>
<td>–</td>
<td>00:14:55</td>
<td>00:00:25</td>
<td>00:51:53</td>
<td>00:00:30</td>
<td>00:26:03</td>
<td>01:33:46</td>
<td>GP COACHING</td>
</tr>
<tr>
<td>9</td>
<td>24</td>
<td>PETER PICHNOFF</td>
<td>M3539</td>
<td>–</td>
<td>00:14:55</td>
<td>00:00:19</td>
<td>00:53:30</td>
<td>00:00:43</td>
<td>00:26:30</td>
<td>01:35:57</td>
<td>GP COACHING</td>
</tr>
      </tbody>
    </table>
  </div>
</div>

Como eu preciso de vária tabelas diferentes numa mesma página, dupliquei a tabela original, alterei os estilos CSS e o JS que está sendo usado, alterando as IDs e classes, mas mesmo assim o topo das tabelas (thead) não ficam fixas na rolagem vertical como está na primeira (Tabela 1).

Achei que duplicando a função e alterando as classes e IDs fosse funcionar, mas não rolou.

Alguém poderia me indicar o que preciso corrigir para que o scroll das tabelas funcionem de forma igual?

9
  • 1
    Cara vc usa esse JS só para deixar essa thead fixa? Da para deixar ela parada sem precisar de JS, vai funcionar o Chrome, Firefox, Edge e Safari. Se te interessar posso fazer um modelo
    – hugocsl
    16/02/2019 às 20:34
  • 1
    caro @LipESprY e hugocsl, muito obrigado pelas respostas! Acabei usando esse exemplo com JS porque quando testei travar o header da tabela só com CSS, zoava ao scroll horizontal. 16/02/2019 às 21:05
  • 1
    O JS pode até funcionar. Mas o CSS, no final, acaba sendo uma solução mais limpa! #off não subestime nosso amigo @hugocsl que "brinca" com css!
    – LipESprY
    16/02/2019 às 21:09
  • 1
    @LipESprY haha vou postar a resposta só com CSS sem buggar nenhum scroll!
    – hugocsl
    16/02/2019 às 21:15
  • 1
    show @hugocsl, vou trabalhar na responsividade dela!!! Muito obrigado!! 16/02/2019 às 21:32

2 Respostas 2

2

Segue um modelo só com CSS, testei no FireFox, Chrome e Edge, mas muito provavelmente tb vai funcionar no Safari.

A ideia é simples, basicamente basta colocar position: sticky; no th

html, body {
  width: 100%;
  height: 150vh;
  margin: 0;
  padding: 0;

  background-image: linear-gradient(red, blue);
  background-repeat: no-repeat;
}
table {
  width: 500px;
  background-color: #fff;
  border-collapse: collapse;  
}

th {
  position: sticky;
  top: 0px;
  background-color: #babaca;
  box-shadow: inset 0 0 0 1px green; 
}
td {
box-shadow: inset 0 0 0 1px green;  
}
div {
  height: 120px;
  overflow: auto;
  width: 400px;
  position: sticky;
  top: 15px;
}
<div>
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Coluna 1</td>
          <td>Coluna 2</td>
          <td>Coluna 3</td>
          <td>Coluna 4</td>
        </tr>
        <tr>
          <td>Coluna 1</td>
          <td>Coluna 2</td>
          <td>Coluna 3</td>
          <td>Coluna 4</td>
        </tr>
        <tr>
          <td>Coluna 1</td>
          <td>Coluna 2</td>
          <td>Coluna 3</td>
          <td>Coluna 4</td>
        </tr>
        <tr>
          <td>Coluna 1</td>
          <td>Coluna 2</td>
          <td>Coluna 3</td>
          <td>Coluna 4</td>
        </tr>
        <tr>
          <td>Coluna 1</td>
          <td>Coluna 2</td>
          <td>Coluna 3</td>
          <td>Coluna 4</td>
        </tr>
        <tr>
          <td>Coluna 1</td>
          <td>Coluna 2</td>
          <td>Coluna 3</td>
          <td>Coluna 4</td>
        </tr>
        <tr>
          <td>Coluna 1</td>
          <td>Coluna 2</td>
          <td>Coluna 3</td>
          <td>Coluna 4</td>
        </tr>
        <tr>
          <td>Coluna 1</td>
          <td>Coluna 2</td>
          <td>Coluna 3</td>
          <td>Coluna 4</td>
        </tr>
        <tr>
          <td>Coluna 1</td>
          <td>Coluna 2</td>
          <td>Coluna 3</td>
          <td>Coluna 4</td>
        </tr>
        <tr>
          <td>Coluna 1</td>
          <td>Coluna 2</td>
          <td>Coluna 3</td>
          <td>Coluna 4</td>
        </tr>
      </tbody>
    </table>
  </div>

13
  • A solução foi top! Mas é uma pena que o sticky não tenha uma boa compatibilidade. =X
    – LipESprY
    16/02/2019 às 21:25
  • Fantástico @hugocsl ! Sem palavras pra agradecer. Tinha trocado de fixed para sticky e nao tinha funcionado. Só não precisava ter usado a cor #babaca hehehehe, mas vou entender como uma zoeirinha! 16/02/2019 às 21:28
  • #babaca kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
    – LipESprY
    16/02/2019 às 21:30
  • @ManoelVilhenaSaldanha na verdade que eu vejo muito a cor #BADA55 badass nos códigos por ai, ai eu deu una aportuguesada haha, nada pessoal. Sobre o position fixed ele eh em relação a pagina como um todo, com fixed realmente não daria certo
    – hugocsl
    16/02/2019 às 21:52
  • 1
    @LipESprY easter egg da zueira RSS, esse era um código que já tinha aqui Pq uso de vez em quando e não lembrava que tinha usado essa cor, apesar que esse tipo de brincadeira nas cores eh comum até na gringa
    – hugocsl
    16/02/2019 às 21:55
1

O principal objetivo das classes no CSS é reaproveitar a estilização. Você acabou andando para trás duplicando todos os estilos e mudando só o nome. Nessa situação era melhor você adicionar um ID e alterar o seletor do JavaScript para os IDs criados.

Melhor ainda é você não utilizar IDs. Apenas criar um seletor que encontra o thead da tabela que está sendo rolada.

Lógico que você pode fazer isso SEM JavaScript! Seria uma solução muito mais limpa. O que você está fazendo é "fixar o thead quando rola a tabela". Mas o que te impede de já deixar ele fixo ali logo ao carregar o documento, direto na estilização?

Voltando à proposta da pergunta, apaguei as duplicatas da estilização, padronizei os estilos na segunda tabela e refiz o JavaScript com a teoria que passei acima.

Veja como ficou:

for (let tab of document.querySelectorAll('.ux-data-table')) {
  tab.onscroll = function (e) {
    var topOfDiv = Math.max(e.target.scrollTop - 2, 0);
    e.target.querySelector('div > table > thead').style.top = topOfDiv+'px';
  }
}
.ux-data-table {
  width: auto;
  max-width: 100%;
  height: 200px;
  overflow: auto;
  float:left;
}

/* Prevents the header from overflowing the scrollbars */
.ux-data-table-inner {
  position: relative;
}

.ux-data-table table {
  width: 100%;
}

.ux-data-table table,
.ux-data-table th,
.ux-data-table td {
  background-color: black;
  color: white;
  border: 1px solid black;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
}

.ux-data-table thead {
  position: absolute;
}

.ux-data-table tbody {
  margin-top: 20px;
  display:block;
}
.ux-data-table td {
  background-color: white;
  color: black;
  border: 1px solid black;
}
<h4>
 Tabela 1
</h4>
<div class='ux-data-table'>
  <div class='ux-data-table-inner'>
    <table>
      <thead>
        <tr>
<th>COLOCAÇÃO</th>
<th>Nº</th>
<th>NOME</th>
<th>CÓD. FAIXA ETÁRIA</th>
<th>COL. FAIXA ETÁRIA</th>
<th>TEMPO SWIM</th>
<th>T1</th>
<th>TEMPO BIKE</th>
<th>T2</th>
<th>TEMPO RUN</th>
<th>TEMPO TOTAL</th>
<th>EQUIPE</th>
        </tr>
      </thead>
      <tbody>
       <tr>
<td>1</td>
<td>12</td>
<td>MARCUS VINICIUS FERNANDES</td>
<td>M3034</td>
<td>–</td>
<td>00:11:32</td>
<td>00:00:29</td>
<td>00:45:36</td>
<td>00:00:29</td>
<td>00:22:01</td>
<td>01:20:07</td>
<td>MF ASSESSORIA ESPORTIVA</td>
</tr>
<tr>
<td>2</td>
<td>16</td>
<td>FELIPE JOSÉ MOLETTA</td>
<td>M3034</td>
<td>–</td>
<td>00:13:37</td>
<td>00:00:22</td>
<td>00:44:34</td>
<td>00:00:25</td>
<td>00:21:29</td>
<td>01:20:27</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>3</td>
<td>17</td>
<td>FERNANDO LUNARDELLI TOLDI</td>
<td>M3034</td>
<td>–</td>
<td>00:12:20</td>
<td>00:00:18</td>
<td>00:47:46</td>
<td>00:00:17</td>
<td>00:21:58</td>
<td>01:22:39</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>4</td>
<td>20</td>
<td>RAFAEL GOMES JURITI FERREIRA</td>
<td>M3539</td>
<td>–</td>
<td>00:14:55</td>
<td>00:00:15</td>
<td>00:45:58</td>
<td>00:00:26</td>
<td>00:24:54</td>
<td>01:26:28</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>5</td>
<td>13</td>
<td>RAUL FURTADO</td>
<td>M4044</td>
<td>–</td>
<td>00:13:34</td>
<td>00:00:27</td>
<td>00:46:59</td>
<td>00:00:30</td>
<td>00:25:08</td>
<td>01:26:38</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>6</td>
<td>18</td>
<td>HUGO AMARAL HORTA BARBOSA</td>
<td>M3034</td>
<td>–</td>
<td>00:13:26</td>
<td>00:00:40</td>
<td>00:48:38</td>
<td>00:00:26</td>
<td>00:25:01</td>
<td>01:28:11</td>
<td>FIBRATECH</td>
</tr>
<tr>
<td>7</td>
<td>21</td>
<td>JUSCELINO ADEODATO DE MIRANDA VASCO</td>
<td>M3539</td>
<td>–</td>
<td>00:14:40</td>
<td>00:00:25</td>
<td>00:50:36</td>
<td>00:00:22</td>
<td>00:25:41</td>
<td>01:31:44</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>8</td>
<td>23</td>
<td>GUSTAVO SLAIB CRUZ PEREIRA</td>
<td>M3539</td>
<td>–</td>
<td>00:14:55</td>
<td>00:00:25</td>
<td>00:51:53</td>
<td>00:00:30</td>
<td>00:26:03</td>
<td>01:33:46</td>
<td>GP COACHING</td>
</tr>
<tr>
<td>9</td>
<td>24</td>
<td>PETER PICHNOFF</td>
<td>M3539</td>
<td>–</td>
<td>00:14:55</td>
<td>00:00:19</td>
<td>00:53:30</td>
<td>00:00:43</td>
<td>00:26:30</td>
<td>01:35:57</td>
<td>GP COACHING</td>
</tr>
      </tbody>
    </table>
  </div>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/>
<h4>
 Tabela 2
</h4>
<div class='ux-data-table'>
  <div class='ux-data-table-inner'>
    <table>
      <thead>
        <tr>
<th>COLOCAÇÃO</th>
<th>Nº</th>
<th>NOME</th>
<th>CÓD. FAIXA ETÁRIA</th>
<th>COL. FAIXA ETÁRIA</th>
<th>TEMPO SWIM</th>
<th>T1</th>
<th>TEMPO BIKE</th>
<th>T2</th>
<th>TEMPO RUN</th>
<th>TEMPO TOTAL</th>
<th>EQUIPE</th>
        </tr>
      </thead>
      <tbody>
       <tr>
<td>1</td>
<td>12</td>
<td>MARCUS VINICIUS FERNANDES</td>
<td>M3034</td>
<td>–</td>
<td>00:11:32</td>
<td>00:00:29</td>
<td>00:45:36</td>
<td>00:00:29</td>
<td>00:22:01</td>
<td>01:20:07</td>
<td>MF ASSESSORIA ESPORTIVA</td>
</tr>
<tr>
<td>2</td>
<td>16</td>
<td>FELIPE JOSÉ MOLETTA</td>
<td>M3034</td>
<td>–</td>
<td>00:13:37</td>
<td>00:00:22</td>
<td>00:44:34</td>
<td>00:00:25</td>
<td>00:21:29</td>
<td>01:20:27</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>3</td>
<td>17</td>
<td>FERNANDO LUNARDELLI TOLDI</td>
<td>M3034</td>
<td>–</td>
<td>00:12:20</td>
<td>00:00:18</td>
<td>00:47:46</td>
<td>00:00:17</td>
<td>00:21:58</td>
<td>01:22:39</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>4</td>
<td>20</td>
<td>RAFAEL GOMES JURITI FERREIRA</td>
<td>M3539</td>
<td>–</td>
<td>00:14:55</td>
<td>00:00:15</td>
<td>00:45:58</td>
<td>00:00:26</td>
<td>00:24:54</td>
<td>01:26:28</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>5</td>
<td>13</td>
<td>RAUL FURTADO</td>
<td>M4044</td>
<td>–</td>
<td>00:13:34</td>
<td>00:00:27</td>
<td>00:46:59</td>
<td>00:00:30</td>
<td>00:25:08</td>
<td>01:26:38</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>6</td>
<td>18</td>
<td>HUGO AMARAL HORTA BARBOSA</td>
<td>M3034</td>
<td>–</td>
<td>00:13:26</td>
<td>00:00:40</td>
<td>00:48:38</td>
<td>00:00:26</td>
<td>00:25:01</td>
<td>01:28:11</td>
<td>FIBRATECH</td>
</tr>
<tr>
<td>7</td>
<td>21</td>
<td>JUSCELINO ADEODATO DE MIRANDA VASCO</td>
<td>M3539</td>
<td>–</td>
<td>00:14:40</td>
<td>00:00:25</td>
<td>00:50:36</td>
<td>00:00:22</td>
<td>00:25:41</td>
<td>01:31:44</td>
<td>(nenhuma)</td>
</tr>
<tr>
<td>8</td>
<td>23</td>
<td>GUSTAVO SLAIB CRUZ PEREIRA</td>
<td>M3539</td>
<td>–</td>
<td>00:14:55</td>
<td>00:00:25</td>
<td>00:51:53</td>
<td>00:00:30</td>
<td>00:26:03</td>
<td>01:33:46</td>
<td>GP COACHING</td>
</tr>
<tr>
<td>9</td>
<td>24</td>
<td>PETER PICHNOFF</td>
<td>M3539</td>
<td>–</td>
<td>00:14:55</td>
<td>00:00:19</td>
<td>00:53:30</td>
<td>00:00:43</td>
<td>00:26:30</td>
<td>01:35:57</td>
<td>GP COACHING</td>
</tr>
      </tbody>
    </table>
  </div>
</div>

Seguindo esse código, você pode adicionar quantas tabelas quiser. Basta manter a mesma classe! O JavaScript vai permanecer o mesmo para todas as tabelas!

Fiz essas alterações seguindo o exemplo original (postado na pergunta) e apliquei no seu. Por fim, deixei disponível no JSFiddle.

1
  • 1
    Muito boa a explicação, talvez seja uma solução mais crossbrowser que apenas com CSS
    – hugocsl
    16/02/2019 às 21:16

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 .