Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Alchemist

Fixar Header e Footer de table com CSS

Por , em Desenvolvimento frontend

Recommended Posts

Alchemist    0

Alchemist
Postado

Boa tarde pessoal, estou precisando de uma solução :P eu tenho uma tabela com header e footer onde eu trago muitas e muitas linhas, estou precisando colocar um scrooler nas linhas da minha tabela e deixar o footer e o header fixo sempre.

 

Eu preciso que está solução sejá em CSS, nada de jquery ou prototype.

 

Será que alguem ai já passou por isto ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alchemist    0

Alchemist
Postado

Cara é exatamente isto que eu estou tentando fazer só que eu não posso colocar esta div dentro da table, na verdade eu estou usando o richfaces em jsf, a ideia que eu vi na maioria dos foruns e tal é colocar uma div por fora e a tabela dentro.

 

Com alguns testes e tudo eu consegui chegar neste código:

 


div.scrollWrapper{
overflow:visible;
overflow:scroll;
}
table.scrollable{
table-layout:fixed; 
margin-right:16px;
margin-right:0;
border-collapse:separate;
}
table.scrollable thead th{
position: relative;
top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop-1);
z-index:20;
}
table.scrollable tbody{
overflow-x:hidden; 
overflow:auto;
}
table.scrollable tr{
 height:0px;
}

 

Só que ele não está funcionando muito bem no ie 6 e no firefox.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Francis Schiavo    1

Francis Schiavo
Postado

Tente isso:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Teste</title>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   <style type="text/css">
     .w20 {width:20px !important;}
     .w200 {width:200px !important;}
     table.grid {
       display:inline-block;
       table-layout:fixed;
       border-collapse:separate;
       border-spacing:0px;
       border:#333333 3px double;
     }
     table.grid th {
       background:#EEEEEE;
       border-top:#FFFFFF 1px solid;
       border-left:#FFFFFF 1px solid;
       border-right:#CCCCCC 1px solid;
       border-bottom:#CCCCCC 1px solid;
     }
     table.grid td {
       border-top:#FFFFFF 1px solid;
       border-left:#FFFFFF 1px solid;
       border-right:#CCCCCC 1px solid;
       border-bottom:#CCCCCC 1px solid;
     }
     table.grid tbody {
       overflow-y:scroll;
       overflow-x:hidden;
       height:300px;
     }
   </style>
 </head>
 <body>
   <table class="grid">
     <colgroup>
       <col class="w20" /><col class="w200" /><col class="w200" /><col class="w200" />
     </colgroup>
     <thead>
       <tr>
         <th> </th><th>Coluna 1</th><th>Coluna 2</th><th>Coluna 3</th><th>Coluna 4</th>
       </tr>
     </thead>
     <tbody>
       <tr><th>1</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>2</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>3</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>4</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>5</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>6</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>7</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>8</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>9</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>10</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>11</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>12</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>13</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>14</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>15</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>16</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>17</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>18</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>19</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>20</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>21</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>22</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>23</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>24</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>25</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>26</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>27</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>28</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>29</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
       <tr><th>30</th><td>Teste</td><td>Teste</td><td>Teste</td><td>Teste</td></tr>
     </tbody>
     <tfoot>
       <tr>
         <th> </th><th>Coluna 1</th><th>Coluna 2</th><th>Coluna 3</th><th>Coluna 4</th>
       </tr>
     </tfoot>
   </table>
 </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

DIV dentro de table não vai conseguir mesmo...

Eu não sei se funciona, mas tente:

tbody {
  overflow: auto;
  max-height: 400px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito