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>