I cannot keep fixed size in the cells of a table

Asked

Viewed 68 times

0

Good, I’m making a table and filling it with values received from a database. The problem is that the size of the cells adapts to the value of their contents instead of keeping the value I set for them. Does anyone have a solution?

The code of the table is as follows : 

table {
        max-width: 400px;
    }

    td,tr{
        width: 33px;
        border: 1px solid red;
    }
    </style>
</head>
<body>

    <table>
        <tr>
            <th>Tipo</th>
            <th>Provisoes</th>
            <th>Pagamentos</th>
            <th>Acrescimos</th>
            <th>Liquidacoes</th>
            <th>Saldo</th>
            <th>Ac_Provisoes</th>
            <th>Ac_Pagamento</th>
            <th>Ac_Acrescimos</th>
            <th>Ac_Liquidacoes</th>
            <th>Ac_Saldo</th>

        </tr>

        <?php while ($row = odbc_fetch_array($query)) {
         ?>
        <tr>
            <td><?= $row['Tipo'] ?></td>
            <td><?= $row['Provisoes'] ?></td>
            <td><?= $row['Pagamentos'] ?></td>
            <td><?= $row['Acrescimos'] ?></td>
            <td><?= $row['Liquidacoes'] ?></td>
            <td><?= $row['Saldo'] ?></td>
            <td><?= $row['Ac_Provisoes'] ?></td>
            <td><?= $row['Ac_Pagamento'] ?></td>
            <td><?= $row['Ac_Acrescimos'] ?></td>
            <td><?= $row['Ac_Liquidacoes'] ?></td>
            <td><?= $row['Ac_Saldo'] ?></td>
        </tr>
    <?php } ?>
    </table>
html css

1 answer

0

One way to settle this is with the property table-layout, used the value as fixed vc determines that the table construction algorithm should maintain a proportional width of all columns, as you can see in the Mozilla documentation on the subject: https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

OBS: This is an old property, still from CSS2, so it is widely accepted by all Browsers.

Now follow three table templates, one with table-layout: fixed and another without (table-layout: auto) so you can compare, in addition to a fixed width-defined. Also display under "Full Page" to see how it behaves when the screen increases:

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid black;
  text-align: center;
  table-layout: fixed;
}
td, th {
  border: 1px solid red;
  overflow: hidden;
  text-overflow: ellipsis;
}
<p>table com table-layout: fixed</p>
<table >
 <thead>
   <tr>
     <th>texto</th>
     <th>texto texto texto</th>
     <th>texto texto</th>
     <th>te</th>
     <th>umapalavramuitomuitogrande</th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td>a</td>
     <td>b</td>
     <td>c</td>
     <td>d</td>
     <td>e</td>
   </tr>
   <tr>
     <td>a</td>
     <td>b</td>
     <td>c</td>
     <td>d</td>
     <td>e</td>
   </tr>
   <tr>
     <td>a</td>
     <td>b</td>
     <td>c</td>
     <td>d</td>
     <td>e</td>
   </tr>
 </tbody>
</table>

<p>table com table-layout: fixed e largura fixa</p>

<table style="table-layout: fixed; width: 400px;">
 <thead>
   <tr>
     <th>texto</th>
     <th>texto texto texto</th>
     <th>texto texto</th>
     <th>te</th>
     <th>umapalavramuitomuitogrande</th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td>a</td>
     <td>b</td>
     <td>c</td>
     <td>d</td>
     <td>e</td>
   </tr>
   <tr>
     <td>a</td>
     <td>b</td>
     <td>c</td>
     <td>d</td>
     <td>e</td>
   </tr>
   <tr>
     <td>a</td>
     <td>b</td>
     <td>c</td>
     <td>d</td>
     <td>e</td>
   </tr>
 </tbody>
</table>

<p><i style="color:red">table com table-layout: auto</i></p>

<table style="table-layout: auto;">
 <thead>
   <tr>
     <th>texto</th>
     <th>texto texto texto</th>
     <th>texto texto</th>
     <th>te</th>
     <th>umapalavramuitomuitogrande</th>
    </tr>
 </thead>
 <tbody>
   <tr>
     <td>a</td>
     <td>b</td>
     <td>c</td>
     <td>d</td>
     <td>e</td>
   </tr>
   <tr>
     <td>a</td>
     <td>b</td>
     <td>c</td>
     <td>d</td>
     <td>e</td>
   </tr>
   <tr>
     <td>a</td>
     <td>b</td>
     <td>c</td>
     <td>d</td>
     <td>e</td>
   </tr>
 </tbody>
</table>

Browser other questions tagged html css

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