1

Olá, eu fiz uma tabela exemplo com três colunas. Gostaria que as três começassem com 10%/70%/20% do tamanho original da tabela e somente a coluna do meio aumentasse de tamanho conforme o seu conteúdo (caso ela fique grande demais, aparece o scroll x. Porém, se minha coluna fica muito extensa, ela diminui o tamanho das outras colunas antes de ativar este scroll. Gostaria de saber se tem algum modo de impedir que as colunas da esquerda e da direita mudassem seu tamanho.

<!DOCTYPE html>
<html>
<head>
    <title>Teste</title>
    <style>
        #dashboard {
          width: 90%;
          margin: 0 auto;
          height: 400px;
          border: 1px solid;
          overflow-y: auto;
          overflow-x: auto;
        }

        #table-dashboard {
          width: 100%;  
        }

        #table-dashboard td:first-child {
          background: green;
          width: 10%;
        }
        #table-dashboard td:nth-child(2) {
          background: blue;
          width: 70%;
        }
        #table-dashboard td:last-child {
          background: red;
          width: 20%;
        }
        
    </style>
</head>
<body>
    <div id="dashboard">
        <table id="table-dashboard">
            <tr>
                <td>1.</td>
                <td>Batata</td>
                <td>R$5,99</td>
            </tr>
            <tr>
                <td>2.</td>
                <td>Cenoura</td>
                <td>R$1,50</td>
            </tr>
            <tr>
                <td>3.</td>
                <td>Tomate</td>
                <td>R$3,00</td>
            </tr>
        </table>
    </div>
</body>
</html>

1 Resposta 1

0

Pode adicionar à TD o overflow-x: auto; para adicionar a barra de scroll.

Contudo, se o conteúdo for maior que o widht vai quebrar a linha, para evitar isso, adicione white-space: nowrap;

Por fim, ainda pode deslocar a célula e aumentar o tamanho, para evitar isso, adicione à tabela table-layout: fixed;:

dashboard {
  width: 90%;
  margin: 0 auto;
  height: 400px;
  border: 1px solid;
  overflow-y: auto;
  overflow-x: auto;
}

#table-dashboard {
  width: 100%;  
  table-layout: fixed;
}

#table-dashboard td:first-child {
  background: green;
  width: 10%;
}
#table-dashboard td:nth-child(2) {
  background: blue;
  width: 70%;
  overflow-x: auto; 
  white-space: nowrap;
}
#table-dashboard td:last-child {
  background: red;
  width: 20%;
}
 <div id="dashboard">
        <table id="table-dashboard">
            <tr>
                <td>1.</td>
                <td>Batata</td>
                <td>R$5,99</td>
            </tr>
            <tr>
                <td>2.</td>
                <td>Cenoura</td>
                <td>R$1,50</td>
            </tr>
            <tr>
                <td>3.</td>
                <td>Tomate</td>
                <td>R$3,00</td>
            </tr>
            <tr>
                <td>3.</td>
                <td>Abacaxi Abacaxi Abacaxi Abacaxi Abacaxi Abacaxi Abacaxi Abacaxi Abacaxi Abacaxi Abacaxi Abacaxi Abacaxi </td>
                <td>R$3,00</td>
            </tr>
        </table>
    </div>

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 .