<!-- RESPONSIVE TABLE -->
<table class="table table-responsive">
  
  <thead> 
	<tr>
		<th>#</th>
		<th>Team</th>
		<th>MP</th>	
		<th>W</th>	
		<th>D</th>	
		<th>L</th>	
		<th>F</th>	
		<th>A</th>	
		<th>D</th>	
		<th>P</th>
	</tr>
  </thead>
  
  <tbody> 
  	<tr>
		<td>1</td>	
		<td>Cruzeiro</td>
		<td>28</td>	
		<td>18</td>	
		<td>5</td>	
		<td>5</td>	
		<td>58</td>	
		<td>24</td>	
		<td>+34</td>	
		<td>59</td> 
  	</tr>
  	<tr> 
		<td>2</td>	
		<td>Botafogo</td>	
		<td>28</td>	
		<td>14</td>	
		<td>7</td>	
		<td>7</td>	
		<td>42</td>	
		<td>32</td>	
		<td>+10</td>	
		<td>49</td> 
  	</tr>
  	<tr>
		<td>3</td> 
		<td>Grêmio</td>	
		<td>28</td>	
		<td>14</td>	
		<td>7</td>	
		<td>7</td>	
		<td>34</td>	
		<td>24</td>	
		<td>+10</td>	
		<td>49</td> 
  	</tr>
  	<tr>
		<td>4</td>		
		<td>Atlético PR</td>	
		<td>28</td>	
		<td>13</td>	
		<td>9</td>	
		<td>6</td>	
		<td>46</td>	
		<td>35</td>	
		<td>+11</td>	
		<td>48</td> 
  	</tr>
  	<tr>
		<td>5</td>		
		<td>Atlético Mineiro</td>	
		<td>28</td>	
		<td>11</td>	
		<td>9</td>	
		<td>8</td>	
		<td>33</td>	 
		<td>28</td>	
		<td>+5</td>	
		<td>42</td> 
  	</tr>
  	<tr>
		<td>6</td>		
		<td>Vitória</td>	
		<td>28</td>	
		<td>11</td>	
		<td>7</td>	
		<td>10</td>	
		<td>40</td>	
		<td>41</td>	
		<td>-1</td>	
		<td>40</td> 
  	</tr>
  	<tr>
		<td>7</td>
		<td>Internacional</td>		
		<td>28</td>		
		<td>10</td>		
		<td>10</td>		
		<td>8</td>		
		<td>43</td>		
		<td>40</td>		
		<td>+3</td>		
		<td>40</td> 
  	</tr>
  	<tr>
		<td>8</td>		
		<td>Goiás</td>		
		<td>28</td>	 
		<td>10</td>		
		<td>10</td>		
		<td>8</td>		
		<td>33</td>		
		<td>34</td>		
		<td>-1</td>		
		<td>40</td> 
  	</tr>
  	<tr>
		<td>9</td> 	
		<td>Santos</td>		
		<td>28</td>		
		<td>10</td>		
		<td>9</td>		
		<td>9</td>		
		<td>34</td>		
		<td>30</td>		
		<td>+4</td>		
		<td>39</td> 
  	</tr>
  	<tr>
		<td>10</td> 	 
		<td>Flamengo</td>		
		<td>28</td>	
		<td>9</td>		
		<td>10</td>		
		<td>9</td>		
		<td>34</td>		
		<td>34</td>		
		<td>+0</td>		
		<td>37</td> 
  	</tr>
  	<tr>
		<td>11</td>	
		<td>Corinthians</td>		
		<td>28</td>		
		<td>8</td>		
		<td>13</td>		
		<td>7</td>		
		<td>22</td>		
		<td>17</td>		
		<td>+5</td>		
		<td>37</td>
  	</tr>
  	<tr> 
		<td>12</td>	
		<td>Bahia</td>		
		<td>28</td>		
		<td>9</td>		
		<td>9</td>		
		<td>10</td>		
		<td>30</td>		
		<td>35</td>		
		<td>-5</td>		
		<td>36</td>
  	</tr>
  	<tr> 
		<td>13</td>	
		<td>Fluminense</td>		
		<td>28</td>		
		<td>9</td>		
		<td>8</td>		
		<td>11</td>		
		<td>32</td>		
		<td>35</td>		
		<td>-3</td>		
		<td>35</td>
  	</tr>
  	<tr> 
		<td>14</td>			
		<td>Portuguesa</td>		
		<td>28</td>		
		<td>9</td>		
		<td>7</td>		
		<td>12</td>		
		<td>41</td>		
		<td>41</td>		
		<td>+0</td>		
		<td>34</td> 
  	</tr>
  	<tr>
		<td>15</td>
		<td>São Paulo</td>	
		<td>28</td>	
		<td>9</td>	
		<td>7</td>	
		<td>12</td>	
		<td>26</td>	
		<td>29</td>	
		<td>-3</td>	
		<td>34 </td>
  	</tr>
  	<tr>
		<td>16</td>
		<td>Coritiba</td>		
		<td>28</td>
		<td>8</td>	
		<td>10</td>	
		<td>10</td>	
		<td>31</td>
		<td>37</td>	
		<td>-6</td>	
		<td>34</td>
  	</tr>
  	<tr> 
		<td>17</td>	
		<td>Criciúma</td>		
		<td>28</td>
		<td>9</td>		
		<td>5</td>		
		<td>14</td>		
		<td>37</td>		
		<td>47</td>		
		<td>-10</td>		
		<td>32</td> 
  	</tr>
  	<tr>
		<td>18</td>	
		<td>Vasco da Gama</td>		
		<td>28</td>		
		<td>8</td>		
		<td>8</td>		
		<td>12</td>		
		<td>38</td>		
		<td>45</td>		
		<td>-7</td>		
		<td>33</td> 
  	</tr>
  	<tr>
		<td>19</td>	
		<td>Ponte Preta</td>		
		<td>28</td>		
		<td>7</td>		
		<td>5</td>		
		<td>16</td>		
		<td>29</td>		
		<td>42</td>		
		<td>-13</td>		
		<td>26</td>
  	</tr>
  	<tr> 
		<td>20</td>	
		<td>Náutico</td>		
		<td>28</td>		
		<td>4</td>		
		<td>5</td>		
		<td>19</td>		
		<td>19</td>		
		<td>52</td>		
		<td>-33</td>		
		<td>17</td>
  	</tr>

  </tbody>
  
</table>
<!-- END RESPONSIVE TABLE -->

  /* Table Base */

  table {
    max-width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: arial;
  }

  .table {
    border-bottom: #999999 solid 1px;
    width: 100%;
    margin-bottom: 20px;
  }

  .table th,
  .table td {
    border-right: #999999 solid 1px;
    font-size: 12px;
    padding: 8px;
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
  }

  .table td:last-child {
     border-right: 0;
  }

  .table thead th {
    font-weight: normal;
    background-color: #005dab;
    color: #fff;
    font-size: 15px;
  }

  .table tbody > tr:nth-child(odd) > td,
  .table tbody > tr:nth-child(odd) > th {
    background-color: #f8f8f8;
  }


/* Small Sizes */
@media (max-width: 767px) { 
  
  /* Responsive Table */
  .table-responsive {
    display: block;
    position: relative;
    width: 100%;
  }

  .table-responsive thead,
  .table-responsive tbody,
  .table-responsive th,
  .table-responsive td,
  .table-responsive tr {
    display: block;
  }
  .table-responsive td,
  .table-responsive th {
    height: 35px;
  }

  .table-responsive thead {
    float: left;
  }

  .table-responsive tbody {
    width: auto;
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .table-responsive tbody tr {
    display: inline-block;
  }

  
  .table td:last-child {
     border-right: #999999 solid 1px;
  }


}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.