1

Estou tentando criar uma tabela com apenas duas linhas. Minha intenção é que a tabela seja responsiva e que barra de rolagem apareça apenas na segunda linha caso o conteúdo ultrapasse a height. No Chrome funciona perfeitamente mais no FireFox não está funcionando.

HTML:

<table border=1>
   <tr>
      <td height="100">
         <h2>Cabeçalho</h2>
      </td>
   </tr>
   <tr>
      <td>
         <div class="conteudo">
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo1</p><br>
         </div>
      </td>
   </tr>
</table>

CSS:

html, body {
    margin:0;
    padding:0;
    height:100%;
}

.conteudo{
    width:100%;
    min-height:100%;
    background-color:#999;
    overflow: auto;
    color: #fff;
}

table {
    width:100%;
    height:100%;
    min-height:100%;
}

Alguém me daria uma mãozinha??

4
  • Cara, o único problema é que as tabelas não são feitas para ser responsivas. Quando você seta as dimensões delas com porcentagem, você acaba deixando margem para erro, pois, como sabemos, os navegadores interpretam nosso código. Desta forma, meu conselho é que nesse caso, tente não resolver com porcentagem. E se possível, já que o tema é responsividade, atualize seu controle para uma lista, ou cards, que funciona muito melhor em aparelhos mobile por exemplo... Commented 24/11/2017 às 19:32
  • Entendo. Desconsiderando a questão da responsividade, porque será que no Chrome a barra de rolagem apenas na div funciona e no Firefox não? Alguma ideia? Commented 24/11/2017 às 19:50
  • Talvez por essa questão de implícito e explícito. Sabe que o height tem umas frescuras com porcentagem ne? Ele só funciona se o elemento pai tiver uma altura determinada, e assim por diante. Tente colocar a altura, mesmo que em porcentagem, em todos os elementos pais da div. Estas questões costumam dar bastante dor de cabeça no cross-browser. Commented 24/11/2017 às 19:53
  • Aparentemente encontrei uma solução. Troquei a div conteudo por um iframe. Parece que resolveu. :) Commented 24/11/2017 às 21:31

1 Resposta 1

3

Você pode usar a função calc para setar a altura da div menos a altura do cabeçalho e adicionando overflow: hidden; no html, body:

html, body {
    margin:0;
    padding:0;
    height:100%;
    overflow: hidden;
}

.conteudo{
    width:100%;
    height: calc(100vh - 116px);
    background-color:#999;
    overflow: auto;
    color: #fff;
}

table {
    width:100%;
}
<table border=1>
  <tr>
      <td height="100">
          <h2>Cabeçalho</h2>
      </td>
  </tr>
  <tr>
      <td>
          <div class="conteudo">
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
          </div>
      </td>
  </tr>
</table>

2
  • Pôr cara show de bola ... funcionou ... Eu já havia resolvido usando iframe ou invés da div. Mais era exatamente isso que eu estava procurando. Valeu. Um abraço. Commented 25/11/2017 às 15:33
  • 1
    @CíceroAntônio legal cara! Se puder marcar ✓ na resposta pra dar como resolvida seria muito bom. Abs!!
    – Sam
    Commented 25/11/2017 às 15:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .