Barra de rolagem fixa

[WeJr 5]

Tenho duas tabelas. A primeira tem a largura determinada pelo texto das linhas e a altura flexível, a segunda tabela terá a mesma altura que a primeira e tem um número de colunas indefinido, mas quando essas colunas se estenderem para fora da tela, uma barra de rolagem deve aparecer e ficar fixa na tela (rolagem horizontal), sem acompanhar a rolagem vertical e sem que a segunda tabela vá para baixo da primeira (devem ficar lado a lado).

Essa tabelas estão dentro de um elemento de altura e posição fixa, com barra de rolagem vertical que deve ser a mesma da segunda tabela para não ficar duas rolagens verticais.

+-----------++------------------------------+

| | | | ||

| | | | ||

| | | | ||

| | | | ||

| | | | v

+-----------++<=================>+

É assim só que a barra de rolagem horizontal não pode ficar no rodapé da tabela e sim fixada na tela abaixo da parte visível da segunda tabela.

O que eu fiz não deu certo porque a segunda tabela vai para baixo da primeira quando excede o tamanho disponível ao lado, assim só cria a barra de rolagem horizontal quando realmente não tem mais espaço. E a barra de rolagem só fica no rodapé da tabela, assim tem que rolar até o fim da página para encontra-la.

É possível resolver isso com CSS?

Se sim, quais recursos do CSS posso utilizar?

Desde já, Obrigado.

 

[William Bruno 1501]

cara... isso ai tá com cara de <frameset>

 

eu não indico usar, já tá bem ultrapassado.

[WeJr 5]

Obrigado pela resposta!

 

Realmente <frameset> poderia resolver grande parte do problema se ainda fosse suportado.

Resolvi isso com jQuery, verificando se tamanho das duas tabelas ultrapassaria a largura da tela e se sim, redimensionaria a <div> em que cada tabela está para o tamanho adequado, criando a barra de rolagem horizontal somente para a segunda tabela.

 

Não sei se foi a melhor alternativa, mas basicamente esse é o código JavaScript:

if (($('table.tabela1').width() + $('table.tabela2').width()) >= $('#container').width()) {
   $('div.container-tabela1').width($('table.tabela1').width() + 1);
   $('div.container-tabela2').width($(document).width() - $('div.container-tabela1').width() - 17);
}

De qualquer forma, não consegui fazer a barra de rolagem horizontal da segunda tabela ficar fixa na tela mesmo quando o rodapé não é visível.

Meu sistema já foi entregue para avaliação, mas se alguém souber de alguma alternativa, por favor poste para que possa ser consultado futuramente.

 

Obrigado.