2

Tenho uma tabela, onde ela se ajusta ao conteúdo que possui. Dessa forma, adicionei um width: 100%. Ela fica do tamanho da janela.

Dei um overflow-x: auto, assim ela deveria criar um scroll, quando menor. Mas não é isso que acontece, ela só pega o scroll, se eu adicionar display:block, mas dessa forma ela perde os width: 100%.

Como faço para ter o scroll, mas manter o 100% do width, com white-space: nowrap; .

Ex: http://jsfiddle.net/CrSpu/9631/

2 Respostas 2

2

Você pode fazer da seguinte forma abaixo, adicionado a tabela dentro de uma div:

.my-table {
  overflow-x: auto;
}

table.width {
    width: 100%; /* Optional */
    border-collapse:collapse;
    white-space: nowrap; 
}

td {
  border: 1px solid #000;
}
<div class="my-table">
  <table class="width">
      <tbody>
          <tr>
              <td>Content 1 olha que legal</td>
              <td>Content 2</td>
              <td>Content 3</td>
              <td>Content 4</td>
              <td>Content 5</td>
          </tr>
      </tbody>
  </table>
</div>

Ex.: https://jsfiddle.net/YurePereira/kmj7qgk3/

1

Na realidade a sua tabela tem width: 100%, pode comprovar isso acrescentando border: 1px solid green; à table.width {... e vendo que esta tem os 100%. Ou seja, queremos é que cada td seja redimensionado (aumentado, neste caso cada um fica com 20%, pois são 5 colunas), então é só:

td{border: 1px solid #000;width: 100px;width:20%;}

Caso queira que o texto não fique colado às margens e fique centrado:

td{border: 1px solid #000;width:20%;padding:5px 20px;text-align:center;}

EXEMPLO no jsfiddle

2
  • A sua resposta também esta certa, mas acabei utilizando a resposta abaixo. ATT
    – abcd
    Commented 23/07/2016 às 11:40
  • 1
    Ainda bem que resolveu @abcd
    – Miguel
    Commented 23/07/2016 às 11:42

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 .