Como especificar a altura da mesa de forma que uma barra de rolagem vertical apareça?

100

Tenho uma tabela com muitas linhas em minha página. Gostaria de definir a altura da mesa, digamos, 500px, de forma que, se a altura da mesa for maior do que isso, uma barra de rolagem vertical aparecerá. Tentei usar o heightatributo CSS no table, mas não funcionou.

css css-tables

— Misha Moroshko
fonte

Talvez use em max-heightvez de apenas heightcomo o último forçará a altura da mesa a ser500px

— Fred

Você pode fazer uma segunda pergunta sobre como evitar que a linha do cabeçalho role. ;)

— Bill Bingham

Veja também stackoverflow.com/questions/1587927/…

— Alex Nolasco

Respostas:

173

Tente usar a overflowpropriedade CSS. Existem também propriedades separadas para definir o comportamento apenas de estouro horizontal ( overflow-x) e estouro vertical ( overflow-y).

Como você deseja apenas a rolagem vertical, tente o seguinte:

table {
  height: 500px;
  overflow-y: scroll;
}

EDITAR:

Aparentemente, os <table>elementos não respeitam a overflowpropriedade. Isso parece ser porque os <table>elementos não são renderizados como display: blockpadrão (na verdade, eles têm seu próprio tipo de exibição). Você pode forçar a overflowpropriedade a funcionar definindo o <table>elemento como um tipo de bloco:

table {
  display: block;
  height: 500px;
  overflow-y: scroll;
}

Observe que isso fará com que o elemento tenha 100% de largura, então, se você não quiser que ele ocupe toda a largura horizontal da página, você também precisa especificar uma largura explícita para o elemento.

— AgentConundrum
fonte

Isso não limita a altura.

— Fred

Não, precisa, você só precisa display:blockna mesa para fazê-lo se comportar como um div jsfiddle.net/TSGSA/1

— Fred

@Fred: Grandes mentes pensam da mesma forma. Eu atualizei minha resposta enquanto você comentava. :)

— AgentConundrum

Essa resposta realmente me ajudou, mas ao invés de aplicá-la na tag da tabela, deveria ser feita no corpo, a fim de permitir que o cabeçalho permaneça estático durante a rolagem. Então, há algum estilo a ser resolvido em relação à área do cabeçalho que está acima da barra de rolagem.

— David,

Se você for usar isso no tbody, certifique-se de adicionar o display: block ao thead (e provavelmente tfoot) ou eles podem ficar um pouco malucos. O problema, ao que parece, é que, depois de fazer isso, você quebrou o vínculo entre o thead e o tbody: as colunas do primeiro não têm consciência da largura do último. Então você remende isso e desce a ladeira escorregadia. "Eu morri pela beleza ..."

— Cuse70 de

Você precisa envolver a tabela dentro de outro elemento e definir a altura desse elemento. Exemplo com css inline:

<div style="height: 500px; overflow: auto;">
 <table>
 </table>
</div>

— Dark Falcon
fonte

Isso não permitirá manter o thead no lugar enquanto o tbody rola.

— David,

Este requisito não está na pergunta original.

— Dark Falcon,

Além disso, a outra resposta (aceita) também não mantém o thead no lugar.

— Brock Adams

Você ainda pode fazer parecer que existe um cabeçalho com esse método. Você oculta o cabeçalho da tabela e, em seguida, cria uma segunda tabela acima da primeira que contém o cabeçalho. Em seguida, defina o estilo de ambas as tabelas para que tenham display:table;suas linhas display:table-row;e suas células, display:table-cell;e as duas tabelas irão se combinar e parecerem ser uma. (NOTA: isso não funciona com tabelas muito grandes; basicamente, combina-as quando pode. Usei essa técnica várias vezes.)

— levininja

Certo. O tamanho do pai deve ser especificado para usar tamanhos relativos. Por exemplo: jsfiddle.net/hz8wy

— Dark Falcon

para definir a altura da tabela, você precisa primeiro definir a propriedade css "display: block" e depois adicionar as propriedades "width / height". Acho este artigo Mozilla um recurso muito bom para aprender como estilizar tabelas: Link

— Krupesh Anadkat
fonte