Tabela de cabeçalho fixa com barra de rolagem horizontal e barra de rolagem vertical
Eu tenho tentado descobrir este problema que tenho com html / css cabeçalho + barras de rolagem. Estamos criando um programa que requer que as barras de rolagem apareçam quando o containerize atingir um certo ponto (dependendo da resolução do usuário).
Estou forçando uma largura mínima na segunda coluna da tabela, para que a tabela pare de diminuir em determinado ponto e força o contêiner a permanecer em uma determinada largura. O estouro no contêiner mostra a barra de rolagem horizontal. Tudo funciona bem. Depois de adicionar uma segunda barra de rolagem para a rolagem vertical, as coisas estão ficando confusas. Alguém tem uma solução para esse problema? Eu quero ter uma barra de rolagem vertical no .table-body, mas a barra de rolagem deve estar visível no outercontainer.
Existe uma boa solução html / css para tabelas de cabeçalho fixas? Eu tenho procurado por uma semana, mas só posso encontrar plugins jQuery para esse tipo de comportamento.
Este é o meu HTML atual:
<!DOCTYPE html>
<html>
<head>
<title>fixed header prototyping</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="outer-container"> <!-- absolute positioned container -->
<div class="inner-container">
<div class="table-header">
<table id="headertable" width="100%" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="header-cell col1">One</th>
<th class="header-cell col2">Two</th>
<th class="header-cell col3">Three</th>
<th class="header-cell col4">Four</th>
<th class="header-cell col5">Five</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table id="bodytable" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell col5">body row2 en nog meer</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
E meu CSS é assim:
body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
table {
border-collapse: collapse; /* make simple 1px lines borders if border defined */
}
tr {
width: 100%;
}
.outer-container {
background-color: #ccc;
position: absolute;
top:0;
left: 0;
right: 300px;
bottom:40px;
overflow: hidden;
}
.inner-container {
width: 100%;
height: 100%;
position: relative;
overflow-x: scroll;
overflow-y:hidden;
}
.table-header {
float:left;
width: 100%;
}
.table-body {
float:left;
height: 100%;
width: inherit;
overflow-y: scroll;
}
.header-cell {
background-color: yellow;
text-align: left;
height: 40px;
}
.body-cell {
background-color: blue;
text-align: left;
}
.col1, .col3, .col4, .col5 {
width:120px;
min-width: 120px;
}
.col2 {
min-width: 300px;
}
Exemplo de JSFiddle -http://jsfiddle.net/W8URM/
Obrigado antecipadamente caras!