TabelaFixa

by Maycon Brito

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css "></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<section>
    <div id="divTabela">
        <table border="1" class="bordasimples" id="tabelainfo" name="tabelainfo">
            <thead>
                <tr id="titulotabela" bgcolor="#cccccc">
                    <th rowspan="1" colspan="1" width="100px">Indicador</td>
                    <th rowspan="1" colspan="1" width="90px">Quantidade</td>
                </tr>
            </thead>
            <tbody>
                <tr id="corpotabela">
                    <td align="center">Abril/2014</td>
                    <td align="center">1</td>
                </tr>
                <tr id="corpotabelaalt">
                    <td align="center">Maio/2014</td>
                    <td align="center">9</td>
                </tr>
                <tr id="corpotabela">
                    <td align="center">Junho/2014</td>
                    <td align="center">70</td>
                </tr>
                <tr id="corpotabelaalt">
                    <td align="center">Julho/2014</td>
                    <td align="center">74</td>
                </tr>
                <tr id="corpotabela">
                    <td align="center">Agosto/2014</td>
                    <td align="center">93</td>
                </tr>
                <tr id="corpotabelaalt">
                    <td align="center">Setembro/2014</td>
                    <td align="center">96</td>
                </tr>
                <tr id="corpotabela">
                    <td align="center">Outubro/2014</td>
                    <td align="center">66</td>
                </tr>
                <tr id="corpotabelaalt">
                    <td align="center">Novembro/2014</td>
       ...

CSS

@font-face {
    font-family: 'fontawesome';
    src:url('../font-awesome/fonts/fontawesome-webfont.eot');
    src:url('../font-awesome/fonts/fontawesome-webfont.eot') format('embedded-opentype'),
        url('../font-awesome/fonts/fontawesome-webfont.woff') format('woff'),
        url('../font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'),
        url('../font-awesome/fonts/fontawesome-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Esta definição de body é aplicável apenas ao datapicker*/
body {
    font-size: 62.5%;
    font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
    margin: 6px;
}

div.center {
    text-align: center;
}

#conteudo {
    padding-top: 0px;
    font-size: 13px;
    text-align: justify;
    font-family: Calibri;
    /*	font-family: Arial, Helvetica, sans-serif;*/
    color:#083c06;
}

#tabelainfo {
    padding-top: 0px;
    font-size: 12px;
    font-family: Calibri;
    text-align: justify;
    color: #083c06;
    text-decoration: none;
}

#divCentral{
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 0;
    padding-top:7px;
}

.overlay{
    background: #ECF1E9;
    display: block;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
    text-align: center;
}

.loader{
    /*    margin-top: 50%;
        margin-bottom: 50%;*/
    /*vertical-align: middle;*/
    align: center; 

}

#conteudocalibri {
    padding-top: 0px;
    text-align: left;
    font-family: Calibri;
    font-size: 13px;
    color:#0D4820;/*#1C750D;*/
}
#tabela {
    padding-top: 0px;
    font-size: 12px;
    text-align: left;
    font-family: Calibri;
    /*width: 750px;*/
    padding: 3px;
    /*	font-family: Arial, Helvetica, sans-serif;*/
}
#obs {
    padding-top: 0px;
    font-size: 12px;
    text-align: left;
    font-family: Calibri;
    /*	font-family: Arial, Helvetica, sans-serif;*/
}
.pesq {
 ...

JavaScript

$(document).ready(function() {
    $('#tabelainfo').dataTable({"sPaginationType": "full_numbers"});
});