Tables with vertical and horizontal scroll

Asked

Viewed 669 times

2

I set up a table with scroll horizontal and vertical from this 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>

Since I need several different tables on the same page, I duplicated the original table, changed the CSS and JS styles that are being used, changing the Ids and classes, but still the top of the tables (thead) are not fixed in the vertical scrolling as it is in the first one (Table 1).

I thought doubling the function and changing the classes and Ids would work, but it didn’t roll.

Could someone tell me what I need to fix so that the scroll the tables function equally?

javascript html table rolling
  • 1

    Cara vc use this JS only to leave this fixed thead? Da para deixar ela parada sem precisar de JS, vai funcionar o Chrome, Firefox, Edge e Safari. If you’re interested I can make a model

  • @hugocsl I made a solution following his line of reasoning. But I didn’t dare just do it with CSS. That’s on you! ;D

  • 1

    Dear @Lipespry and hugocsl, thank you so much for your answers! I ended up using this example with JS because when I tried to lock the table header only with CSS, I mocked the horizontal scroll.

  • 1

    JS might even work. But CSS, in the end, turns out to be a cleaner solution! #off don’t underestimate our friend @hugocsl who "plays" with css!

  • 1

    @Lipespry haha I will post the answer only with CSS without bugging any scroll!

  • @hugocsl, surely a CSS expert would take that literally. It’s not my case, rs although I manage to manage well. Using JS can harm me in terms of browser compatibility or even responsiveness?

  • I haven’t had a compatibility problem with Javascript codes yet. The only problem I’ve had is with Internet Explorer. But it doesn’t even count as a browser. kkk. About responsiveness: it goes beyond Javascript. The basics are done via styling. ;D

  • @Manoelvilhenasaldanha for her to be responsive just put the width of the div and the table of my answer in %

  • 1

    show @hugocsl, I will work on her responsiveness!!! Thank you so much!!

Show 4 more comments

2 answers

2

Follow a model only with CSS, tested in Firefox, Chrome and Edge, but most likely tb will work in Safari.

The idea is simple, basically just put position: sticky; in the 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>

  • The solution was top! But it’s a pity that the sticky don’t have a good compatibility. =X

  • Fantastic @hugocsl ! No words to thank. Had switched from Fixed to Sticky and had not worked. I just didn’t have to use the color #asshole hehehehe, but I’ll take it as a joke!

  • #babaca kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk

  • @Manoelvilhenasaldanha actually that I see a lot of the color #BADA55 badass in the codes around, ai eu deu una aportuguesada haha, nada personal. About the position Fixed it eh in relation to the page as a whole, with Fixed really wouldn’t work

  • 1

    @Lipespry Easter Egg from Zueira RSS, this was a code that already had here Pq use from time to time and did not remember that had used this color, although this type of play in colors is common even in gringa

  • @hugocsl, in the responsive version, testing by cell phone and not by the browser inspector, the top is not fixed. Any suggestions?

  • @Manoelvilhenasaldanha and what did you do in this mobile version? Is there any way you can put your code in the codepen or something? This exact model of my answer I just tested here on my Android phone and it worked

  • @hugocsl, I was trying to edit the answer. In Android really rolled, only in Chrome on iPhone that the top of the table goes up together in Hover :(

  • @Manoelvilhenasaldanha so I said that she can not be as crosbrowser as options with JS, but test by putting the prefix vendor of Safari, that way where you have the property, ai vc leave what is already there and put tb -webkit-position: sticky; and so too position: -webkit-sticky;

  • It worked perfectly with -webk, @hugocsl it!! Thanks a lot for the help!!

  • @Manoelvilhenasaldanha how good it worked there! If you believe that this answer solved your problem consider mark it as accepted in this icon ✔. So it doesn’t stay pending on the site as unresolved question. You can remove this vote at any time if you want, or put it in another answer that comes up and you think it suits you better. []s

  • @hugocsl, I voted, but since I’m new here in the stack (reputation under 15), my vote is not computed :(.

  • @Manoelvilhenasaldanha understood her, I no longer remembered that had this rss, I found that to accept an answer does not need minimal reputation... The icon to accept is this icon ✔ It’s just below the little arrows, you don’t actually have to click the little arrow in order to accept an answer. Just click on the below of the arrows of the posts in the answer you choose, as you can only mark an answer as accepted...

Show 8 more comments

1

The main goal of CSS classes is to reuse styling. You ended up going backwards by doubling all styles and changing only the name. In this situation you’d better add an ID and change the Javascript selector for the created Ids.

Even better is you don’t use Ids. Just create a selector that finds the thead table being rolled.

Of course you can do this WITHOUT Javascript! It would be a much cleaner solution. What you are doing is "fix the thead when you scroll the table". But what prevents you from already leaving it fixed right there when you load the document, right in the stylization?

Going back to the proposal of the question, I deleted the duplicates of the stylization, standardized the styles in the second table and I remade Javascript with the theory I passed above.

Look how it turned out:

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>

By following this code, you can add as many tables as you want. Just keep the same class! Javascript will remain the same for all tables!

I made these changes following the original example (posted in the question) and applied to yours. Finally, I made it available on Jsfiddle.

  • 1

    Very good explanation, maybe it’s a more crossbrowser solution than just with CSS

Browser other questions tagged javascript html table rolling

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