Fix size of specific columns

Asked

Viewed 19 times

1

Hello, I made an example table with three columns. I would like all three to start with 10%/70%/20% the original size of the table and only the middle column increased in size according to its contents (if it gets too big, the scroll x. However, if my column gets too long, it decreases the size of the other columns before activating this scroll. I wonder if you have any way to prevent the left and right columns from changing their size.

<!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>
css table

1 answer

0

Can add to TD the overflow-x: auto; to add the scroll bar.

However, if the content is greater than the widht will break the line, to avoid this, add white-space: nowrap;

Finally, you can still move the cell and increase the size, to avoid this, add to the table 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>

Browser other questions tagged css table

You are not signed in. Login or sign up in order to post.