Paginação em table em html
Olá pessoal estou criando um modelo de uma tabela onde terá muitos registros que serão listados nela, gostaria de saber como que seria feito para colocar uma paginação nela, para não mostrar todos registro de uma só vez, semelhante a paginação de sites: 1/2/3/4....+
minha tabela:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html><head>
<title>Tabela</title>
<style type="text/css">body { font: normal 11px tahoma,arial,serif; }
table{margin: 0px;}
table,th,td{border-collapse: collapse;}
th,td{border-bottom: 1px solid #000000;padding: 0px;}
th span{display: block; padding: 3px}
td span{display: block; padding: 3px}
#lista table {width: 350px;}
#lista th{color: #FFFFFF;background-color: #E92345;text-align: left}
#lista.tabContainer {width: 366px;border: 1px solid #000000}
#lista .scrollContainer {width: 366px;height: 100px;overflow: auto;}
#lista .tabela-coluna0{width: 100px;}
#lista .tabela-coluna1{width: 150px;}
#lista .tabela-coluna2{width: 100px;}
</style>
</head>
<body>
<div class="tabContainer" id="lista">
<table border="0px">
<thead>
<tr>
<th class="tabela-coluna0"><span>CPF</span></th>
<th class="tabela-coluna1"><span>Nome</span></th>
<th class="tabela-coluna2"><span>Cargo</span></th>
</tr>
</thead>
</table>
<div class="scrollContainer">
<table border="0">
<tbody>
<tr>
<td class="tabela-coluna0"><span>111.111.111-11</span></td>
<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>
<td class="tabela-coluna2"><span>teste</span></td>
</tr>
<tr>
<td class="tabela-coluna0"><span>111.111.111-11</span></td>
<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>
<td class="tabela-coluna2"><span>teste</span></td>
</tr>
<tr>
<td class="tabela-coluna0"><span>111.111.111-11</span></td>
<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>
<td class="tabela-coluna2"><span>teste</span></td>
</tr>
<tr>
<td class="tabela-coluna0"><span>111.111.111-11</span></td>
<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>
<td class="tabela-coluna2"><span>teste</span></td>
</tr>
<tr>
<td class="tabela-coluna0"><span>111.111.111-11</span></td>
<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>
<td class="tabela-coluna2"><span>teste</span></td>
</tr>
<tr>
<td class="tabela-coluna0"><span>111.111.111-11</span></td>
<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>
<td class="tabela-coluna2"><span>teste</span></td>
</tr>
<tr>
<td class="tabela-coluna0"><span>111.111.111-11</span></td>
<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>
<td class="tabela-coluna2"><span>teste</span></td>
</tr>
<tr>
<td class="tabela-coluna0"><span>111.111.111-11</span></td>
<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>
<td class="tabela-coluna2"><span>teste</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>Discussão (2)
Carregando comentários...