2

O exemplo mostra uma div com scroll na horizontal, mas gostaria que a tabela junto com o div que tem scroll ajustasse 100% ao tamanho da tela.

.div {
  border: solid;
  display: inline-block;
  width: 300px;
  overflow: auto;
}
.tablefull td{
    border: solid;
}
.table th{
    border: solid;
  }
.table td {
  padding: 10px;
}
<table class="tablefull">
  <tr>
    <td colspan="2">header</td>
  </tr>

  <tr>
    <td>MENU
    </td>
    <td class="">
      <div class="div">
        <table>
          <thead>
            <tr>
              <th>Desc0</th>
              <th>Desc1</th>
              <th>Desc2</th>
              <th>Desc3</th>
              <th>Desc4</th>
              <th>Desc5</th>
              <th>Desc6</th>
              <th>Desc7</th>
              <th>Desc8</th>
              <th>Desc9</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Item0</td>
              <td>Item1</td>
              <td>Item2</td>
              <td>Item3</td>
              <td>Item4</td>
              <td>Item5</td>
              <td>Item6</td>
              <td>Item7</td>
              <td>Item8</td>
              <td>Item9</td>
            </tr>
                        <tr>
              <td>Item0</td>
              <td>Item1</td>
              <td>Item2</td>
              <td>Item3</td>
              <td>Item4</td>
              <td>Item5</td>
              <td>Item6</td>
              <td>Item7</td>
              <td>Item8</td>
              <td>Item9</td>
            </tr>
                        <tr>
              <td>Item0</td>
              <td>Item1</td>
              <td>Item2</td>
              <td>Item3</td>
              <td>Item4</td>
              <td>Item5</td>
              <td>Item6</td>
              <td>Item7</td>
              <td>Item8</td>
              <td>Item9</td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
  </tr>
  <tr>
    <td colspan="2">footer</td>
  </tr>
</table>

0

1 Resposta 1

3

Antes de mais nada, um aviso: Não resolvi mexendo só no ponto que você pediu, reestruturei o HTML como solução para o problema como um todo.

Basicamente, removi a tabela de fora, afinal, é um layout e não uma tabela de verdade. A de dentro mantive, pois semanticamente é correto o <table>, pois são dados tabulares.

Pontos importantes:

  • Definimos position:relative em geral nas divs, para que coisas como o menu possam usar altura 100% em relação à div pai, e não à página toda;

  • para conseguirmos o menu e a tabela da mesma altura, foi criada uma div extra (body); que nos permitiu definir a altura do menu;

  • foi usado box-sizing:border-box para que as medidas incluam as bordas, evitando "estouro" do layout;

  • para que o container da tabela mantivesse os 100% de largura, criamos uma margem esquerda onde o menu coubesse, mas não definimos largura (assim, a div ocupa automaticamente o espaço sobrando. Com 100% o resultado não ia ser o desejado, pois CSS é cheio de esquisitices);

  • como o menu tinha largura fixa, usamos o position:absolute, de forma à div da tabela ficar lado a lado com o menu (usando a margem como artifício pra não "encavalar" as duas coisas);

  • o toque final foi o overflow:auto na div que contém a tabela, para que a barra de rolagem apareça quando necessário.

div { box-sizing: border-box; position: relative; }

.header,.footer,.body { width: 100%; }
.header,.footer,.menu,.table { border: 2px solid #000; }
.body { margin:4px 0; }
.menu { position:absolute; width:100px; height:100%; }
.table { margin-left:104px; overflow:auto; }
td,th {border:2px solid #000}
<div class="header">Header</div>
<div class="body">
  <div class="menu">Menu</div>
  <div class="table">
    <table>
      <thead>
        <tr>
          <th>Desc0</th>
          <th>Desc1</th>
          <th>Desc2</th>
          <th>Desc3</th>
          <th>Desc4</th>
          <th>Desc5</th>
          <th>Desc6</th>
          <th>Desc7</th>
          <th>Desc8Desc8Desc8Desc8Desc8Desc8Desc8Desc8Desc8Desc8</th>
          <th>Desc9</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Item0</td>
          <td>Item1</td>
          <td>Item2</td>
          <td>Item3</td>
          <td>Item4</td>
          <td>Item5</td>
          <td>Item6</td>
          <td>Item7</td>
          <td>Item8</td>
          <td>Item9</td>
        </tr>
        <tr>
          <td>Item0</td>
          <td>Item1</td>
          <td>Item2</td>
          <td>Item3</td>
          <td>Item4</td>
          <td>Item5</td>
          <td>Item6</td>
          <td>Item7</td>
          <td>Item8</td>
          <td>Item9</td>
        </tr>
        <tr>
          <td>Item0</td>
          <td>Item1</td>
          <td>Item2</td>
          <td>Item3</td>
          <td>Item4</td>
          <td>Item5</td>
          <td>Item6</td>
          <td>Item7</td>
          <td>Item8</td>
          <td>Item9</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="footer">Footer</div>

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