Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia pessoal. Gostaria de tirar uma dúvida.
Tenho uma div configurada da seguinte forma:
<div style="overflow:scroll; width:800px; background-color:#FFFFFF;">
Dentro desta div, existe uma tabela de 2000px de largura.
No entanto se eu deixar a largura da div=100%, a largura dela vai para 2000px. Gostaria de saber o que fazer para que ela fique do tamanho da tela do computador e não da tabela contida dentro dele.
Att.,
x_confused
você pode pegar o tamanho da tela do monitor com JS e colocar como largura do box, então pode deixar o 'overflow:scroll', se não tiver uma largura fixa declarada eel não funciona.
Olá Public2004. Na verdade eu quero gerar uma barra de rolagem na div para que ela pegue todo o elemento entendeu? Não é interessante a DIV ser maior que a tabela.
Desnickadu, vou tentar fazer isso que você falou. Vou tentar pegar a resolução de tela do usuário e colocar como largura em pixels da DIV. Acho que seria uma solução.
Obrigad pelas respostas.
desnecessário isso.
está usando DOCTYPE ? em qual navegador testou?
existem outros elementos influenciando ?
um elemento nivel de bloco, tem o tamanho do container dele, e não do que ele contém.
William, estou usando DOCTYPE transitional, testei no IE 7.0 e Firefox 3.5.
Na verdade não existem outros elementos. É um DIV, com uma TABLE dentro. Esta table tem 2000px de largura, devido à quantidade de campos de um banco de dados que ela exibe.
Simplesmente eu quero fazer a DIV ficar com uma largura de 100%, e ative a barra de rolagem para poder exibir todo o conteúdo da TABLE.
grato.
<html>
<head>
<style type="text/css">
#container {
width: 100%;
overflow: scroll;
height: 100px;
}
</style>
</head>
<body>
<div id="container">
<table style="width: 2000px;">
<tr>
<td>Table com 2000px de largura</td>
</tr>
</table>
</div>
</body>
</html> mesmo sem DOCTYPE, a div só possui a largura do body.Não sofre nenhuma influencia da table que está dentro.Mostre como você fez.
<div style="overflow:scroll; width:100%; background-color:#FFFFFF;">
<table width="2000">
<tr>
<td width="13%" bgcolor="#CCCCCC"> <strong>Empresa</strong></td>
<td width="13%" height="20" bgcolor="#CCCCCC"><strong> Cidade </strong></td>
<td width="5%" bgcolor="#CCCCCC"><div align="center"><strong>Data</strong></div></td>
<td width="5%" height="20" bgcolor="#CCCCCC"><div align="center"><strong>Ramal</strong></div></td>
<td width="5%" height="20" bgcolor="#CCCCCC"><div align="center"><strong>Hora Início</strong> </div></td>
<td width="5%" bgcolor="#CCCCCC"><div align="center"><strong>Hora Fim</strong> </div></td>
<td width="5%" bgcolor="#CCCCCC"><div align="center"><strong>Dur. Tarifada</strong> </div></td>
<td width="5%" bgcolor="#CCCCCC"><div align="center"><strong>Tempo Espera</strong> </div></td>
<td width="5%" bgcolor="#CCCCCC"><div align="center"><strong>Tipo</strong></div></td>
<td width="6%" bgcolor="#CCCCCC"><div align="center"><strong>Telefone</strong></div></td>
<td width="5%" bgcolor="#CCCCCC"><div align="center"><strong>Valor</strong></div></td>
<td width="5%" bgcolor="#CCCCCC"><div align="center"><strong>Conta</strong></div></td>
<td width="5%" bgcolor="#CCCCCC"><div align="center"><strong>Operadora</strong></div></td>
<td width="11%" bgcolor="#CCCCCC"><div align="center"><strong>Grupo de Tronco </strong></div></td>
<td width="7%" height="20" bgcolor="#CCCCCC"><div align="center"><strong>Pessoa</strong></div></td>
</tr>
</table>
</div>E qual é o suposto erro?
aqui funcionou perfeito no Chrome, no Firefox e no IE6
a tabela dentro da DIV criou a rolagem, e a div continuou com 100% de largura que é menor que os 2000px da tabela.
poste um link para o site, para vermos a situação real.
Mas isso é meio ilógico não? Um elemento com tamanho maior dentro de outro com tamanho menor...
Tente utilizar medidas em "%" também para a tabela...
Att.