"Table fixed row header"
Bootstrap 3.3.0 Snippet by GuilhermeCipriano

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Table fixed row header</h2> </div> <table class="table table-fixed table-striped" border="1px";> <thead> <tr> <th>Posição</th> <th>Pontos</th> <th>Nome</th> <th>Instituição</th> <th>Ano Escolar</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>720</td> <td>José</td> <td>Instituto Federal Catarinense</td> <td>quarto ano</td> </tr> <tr> <td>2</td> <td>675</td> <td>Rodolfo</td> <td>Almirante Boiteux</td> <td>terceiro ano</td> </tr> <tr> <td>3</td> <td>670</td> <td>Gustavo</td> <td>CAIC Professor Mariano Costa</td> <td>terceiro ano</td> </tr> <tr> <td>4</td> <td>Hafez</td> <td>Mir shafieian</td> <td>29</td> <td>Esfahan</td> </tr> <tr> <td>5</td> <td>Ehsan</td> <td>Jahangard</td> <td>23</td> <td>Andika</td> </tr> <tr> <td>6</td> <td>Diako</td> <td>Mahmoudi</td> <td>27</td> <td>Sanandaj</td> </tr> <tr> <td>7</td> <td>Emad</td> <td>Deris</td> <td>26</td> <td>Mahshahr</td> </tr> <tr> <td>8</td> <td>Seyed Mohammad</td> <td>Mousavi</td> <td>27</td> <td>Hendijan</td> </tr> </tbody> </table> </div>
/* Se necessário, usar overflow para definir o tamanho da tabela*/ } table { width: 50%; } thead, tbody, tr, td, th { display: block; } thead th { height: 30px; } tbody td, thead th { float: left; width: 20%; } tr:after { clear: both; content: ' '; display: block; visibility: hidden; }

Related: See More


Questions / Comments: