In this table there is the description of 5 rounds, I would like to know how to define a specific round to put on the site, for example every time I open the page will always be in round 1, to go to the others I click the arrow forward, but I would like to choose the round to start, would type 3 and then could go forward or back with the arrows.
Another item would be the css, because in each round the cells are of different sizes, I wanted them all to be the standard size for all the rounds.
To establish an active round, use the following code:
// Estabelece que que a rodada atual é a décima rodada
var inRodada = 10;
var $rodadas = $('.rodadas .rodada').removeClass('active');
// O -1 é necessário porque o vetor de rodadas começa em 0
$rodadas.eq(inRodadav - 1).addClass('active');
and to make all the rows have the same width, just specify the width attribute in TD and TH .
Update: Below is an example of how the tables would fit in.
$(document).ready(function() {
// Estabelece que que a rodada atual é a décima rodada
var inRodada = 2;
var $rodadas = $('.rodadas .rodada').removeClass('active');
// O -1 é necessário porque o vetor de rodadas começa em 0
$rodadas.eq(inRodada - 1).addClass('active');
$('.go').on('click', function(event) {
event.preventDefault();
var dir = parseInt($(this).data('go'));
var $active = $('.rodadas .rodada.active');
$('.wrapper .go').prop('disabled', false);
if (dir == 1) {
var $f = $active.next();
$(this).prop('disabled', ($f.next().length == 0));
} else {
var $f = $active.prev();
$(this).prop('disabled', ($f.prev().length == 0));
}
$active.removeClass('active');
$f.addClass('active');
});
});<link href="http://files.saichorao.com.br/200000756-1d8ae1f3a7/rodadacss.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="wrapper">
<div class="header">
<button class="prev random-button animate go" data-go="-1">Anterior</button>
<span style="color:#ffffff;text-align: center" font="bold" class="title">TABELA</span>
<button class="next random-button animate go" data-go="1">Próxima</button>
</div>
<div class="rodadas">
<div class="rodada active" data-title="Rodada 1" id="rodada-1">
<table border="1px" class="radius" style="width: 450px; margin: 0 auto;">
<tbody>
<tr>
<th colspan="5" style="height: 23px; text-align: center;">1º RODADA</th>
</tr>
<tr>
<td class="minhaTD" width="100">CASA</td>
<td class="minhaTD" width="100">PONTOS</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">PONTOS</td>
<td class="minhaTD" width="100">FORA</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 1</td>
<td class="minhaTD" width="100">65,93</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">61,39</td>
<td class="minhaTD" width="100">Teste 2</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 3</td>
<td class="minhaTD" width="100">60,13</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">74,70</td>
<td class="minhaTD" width="100">Teste 4</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 5</td>
<td class="minhaTD" width="100">79,98</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">46,15</td>
<td class="minhaTD" width="100">Teste 6</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 7</td>
<td class="minhaTD" width="100">66,48</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">75,13</td>
<td class="minhaTD" width="100">Teste 8</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 9</td>
<td class="minhaTD" width="100">81,02</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">52,94</td>
<td class="minhaTD" width="100">Teste 10</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 11</td>
<td class="minhaTD" width="100">68,84</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">64,34</td>
<td class="minhaTD" width="100">Teste 12</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 13</td>
<td class="minhaTD" width="100">52,84</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">65,12</td>
<td class="minhaTD" width="100">Teste 14</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 19</td>
<td class="minhaTD" width="100">48,44</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">92,45</td>
<td class="minhaTD" width="100">Teste 20</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 15</td>
<td class="minhaTD" width="100">57,04</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">100,94</td>
<td class="minhaTD" width="100">Teste 16</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 17</td>
<td class="minhaTD" width="100">73,54</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">29,54</td>
<td class="minhaTD" width="100">Teste 18</td>
</tr>
</tbody>
</table>
</div>
<div class="rodada" data-title="Rodada 2" id="rodada-2">
<table border="1px" class="modernTable withHeader" style="width: 450px; margin: 0 auto;">
<tbody>
<tr>
<th colspan="5" style="height: 23px; text-align: center;">2º RODADA</th>
</tr>
<tr>
<td class="minhaTD" width="100">CASA</td>
<td class="minhaTD" width="100">PONTOS</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">PONTOS</td>
<td class="minhaTD" width="100">FORA</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 16</td>
<td class="minhaTD" width="100">63,69</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">29,32</td>
<td class="minhaTD" width="100">Teste 18</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 2</td>
<td class="minhaTD" width="100">57,24</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">42,02</td>
<td class="minhaTD" width="100">Teste 4</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 11</td>
<td class="minhaTD" width="100">57,89</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">65,26</td>
<td class="minhaTD" width="100">Teste 5</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 12</td>
<td class="minhaTD" width="100">56,39</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">32,29</td>
<td class="minhaTD" width="100">Teste 15</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 17</td>
<td class="minhaTD" width="100">83,39</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">44,19</td>
<td class="minhaTD" width="100">Teste 13</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 10</td>
<td class="minhaTD" width="100">47,34</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">79,52</td>
<td class="minhaTD" width="100">Teste 19</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 14</td>
<td class="minhaTD" width="100">84,79</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">55,86</td>
<td class="minhaTD" width="100">Teste 1s</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 6</td>
<td class="minhaTD" width="100">40,86</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">60,36</td>
<td class="minhaTD" width="100">Teste 7</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 20</td>
<td class="minhaTD" width="100">54,46</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">59,96</td>
<td class="minhaTD" width="100">Teste 3</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 8</td>
<td class="minhaTD" width="100">51,36</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">76,34</td>
<td class="minhaTD" width="100">Teste 9</td>
</tr>
</tbody>
</table>
</div>
<div class="rodada" data-title="Rodada 3" id="rodada-3">
<table border="1px" class="modernTable withHeader" style="width: 450px; margin: 0 auto;">
<tbody>
<tr>
<th colspan="5" style="height: 23px; text-align: center;">3º RODADA</th>
</tr>
<tr>
<td class="minhaTD" width="100">CASA</td>
<td class="minhaTD" width="100">PONTOS</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">PONTOS</td>
<td class="minhaTD" width="100">FORA</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 19</td>
<td class="minhaTD" width="100">93,33</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">90,23</td>
<td class="minhaTD" width="100">Teste 12</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 15</td>
<td class="minhaTD" width="100">67,43</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">88,83</td>
<td class="minhaTD" width="100">Teste 2</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 1</td>
<td class="minhaTD" width="100">76,63</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">23,26</td>
<td class="minhaTD" width="100">Teste 6</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 13</td>
<td class="minhaTD" width="100">52,13</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">55,83</td>
<td class="minhaTD" width="100">Teste 16</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 5</td>
<td class="minhaTD" width="100">79,83</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">86,03</td>
<td class="minhaTD" width="100">Teste 20</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 8</td>
<td class="minhaTD" width="100">70,25</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">58,30</td>
<td class="minhaTD" width="100">Teste 17</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 3</td>
<td class="minhaTD" width="100">88,33</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">71,23</td>
<td class="minhaTD" width="100">Teste 10</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 9</td>
<td class="minhaTD" width="100">75,65</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">75,33</td>
<td class="minhaTD" width="100">Teste 14</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 4</td>
<td class="minhaTD" width="100">77,63</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">93,33</td>
<td class="minhaTD" width="100">Teste 7</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 18</td>
<td class="minhaTD" width="100">91,75</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">60,33</td>
<td class="minhaTD" width="100">Teste 11</td>
</tr>
</tbody>
</table>
</div>
<div class="rodada" data-title="Rodada 4" id="rodada-4">
<table border="1px" class="modernTable withHeader" style="width: 450px; margin: 0 auto;">
<tbody>
<tr>
<th colspan="5" style="height: 23px; text-align: center;">4º RODADA</th>
</tr>
<tr>
<td class="minhaTD" width="100">CASA</td>
<td class="minhaTD" width="100">PONTOS</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">PONTOS</td>
<td class="minhaTD" width="100">FORA</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 12</td>
<td class="minhaTD" width="100">19,31</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">26,22</td>
<td class="minhaTD" width="100">Teste 10</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 20</td>
<td class="minhaTD" width="100">14,09</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">17,27</td>
<td class="minhaTD" width="100">Teste 15</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 6</td>
<td class="minhaTD" width="100">41,44</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">24,29</td>
<td class="minhaTD" width="100">Teste 18</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 11</td>
<td class="minhaTD" width="100">25,01</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">24,50</td>
<td class="minhaTD" width="100">Teste 17</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 16</td>
<td class="minhaTD" width="100">30,51</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">11,92</td>
<td class="minhaTD" width="100">Teste 19</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 4</td>
<td class="minhaTD" width="100">31,21</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">63,08</td>
<td class="minhaTD" width="100">Teste 8</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 7</td>
<td class="minhaTD" width="100">43,97</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">34,38</td>
<td class="minhaTD" width="100">Teste 9</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 2</td>
<td class="minhaTD" width="100">20,31</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">38,00</td>
<td class="minhaTD" width="100">Teste 13</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 1s</td>
<td class="minhaTD" width="100">42,29</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">14,59</td>
<td class="minhaTD" width="100">Teste 5</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 14</td>
<td class="minhaTD" width="100">25,09</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">30,29</td>
<td class="minhaTD" width="100">Teste 3</td>
</tr>
</tbody>
</table>
</div>
<div class="rodada" data-title="Rodada 5" id="rodada-5">
<table border="1px" class="modernTable withHeader" style="width: 450px; margin: 0 auto;">
<tbody>
<tr>
<th colspan="5" style="height: 23px; text-align: center;">5º RODADA</th>
</tr>
<tr>
<td class="minhaTD" width="100">CASA</td>
<td class="minhaTD" width="100">PONTOS</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">PONTOS</td>
<td class="minhaTD" width="100">FORA</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 17</td>
<td class="minhaTD" width="100">84,86</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">54,24</td>
<td class="minhaTD" width="100">Teste 1</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 19</td>
<td class="minhaTD" width="100">43,36</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">64,46</td>
<td class="minhaTD" width="100">Teste 11</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 5</td>
<td class="minhaTD" width="100">67,36</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">72,06</td>
<td class="minhaTD" width="100">Teste 13</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 3</td>
<td class="minhaTD" width="100">46,10</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">39,37</td>
<td class="minhaTD" width="100">Teste 6</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 7</td>
<td class="minhaTD" width="100">49,44</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">84,46</td>
<td class="minhaTD" width="100">Teste 12</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 16</td>
<td class="minhaTD" width="100">60,46</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">45,47</td>
<td class="minhaTD" width="100">Teste 20</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 18</td>
<td class="minhaTD" width="100">51,80</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">48,20</td>
<td class="minhaTD" width="100">Teste 15</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 10</td>
<td class="minhaTD" width="100">45,85</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">36,70</td>
<td class="minhaTD" width="100">Teste 8</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 2</td>
<td class="minhaTD" width="100">68,56</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">60,15</td>
<td class="minhaTD" width="100">Teste 14</td>
</tr>
<tr>
<td class="minhaTD" width="100">Teste 9</td>
<td class="minhaTD" width="100">57,94</td>
<td class="minhaTD" width="50">X</td>
<td class="minhaTD" width="100">54,84</td>
<td class="minhaTD" width="100">Teste 4</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>