Tabela com cabeçalho fixo e barra de rolagem
Se não houver a necessidade de barra de rolagem, apenas remova o height e o overflow de .scrollContainer e diminua 16 px de .tabContainer e scrollContainer na propriedade width.
<!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,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> <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 (16)
Carregando comentários...