Home > Back-end >  TDs of only a table not accept width
TDs of only a table not accept width

Time:08-08

    table.produtos_vendidos table {
        border-collapse:collapse;
        border-right: 1px solid #ccc;
    }
    table.produtos_vendidos table th {
        height: 120px;
        text-align: center;
    }
    table.produtos_vendidos table th,
    table.produtos_vendidos table td {
        padding: 5px;
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
    }
    table.produtos_vendidos table tr td {
        height: 50px;
    }
    div.rolante {
        width:500px;
        overflow-x: scroll;
    }
    table.produtos_vendidos table tr.prod td {
        text-align: center;
        width: 250px;
    }
<table >
   <tbody>
      <tr style="vertical-align: top;">
         <td>
            <table>
               <tbody>
                  <tr>
                     <th style="width: 300px;">PEDIDO</th>
                     <th style="width: 80px;">CX</th>
                     <th style="width: 80px;">CUSTO UNITÁRIO</th>
                     <th style="width: 80px;">CUSTO DA CAIXA</th>
                  </tr>
                  <tr>
                     <td style="width: 300px;">SACO LIXO  POTENZZO  ROLO PRETO  15L 60UN</td>
                     <td style="width: 80px; text-align: center;">20</td>
                     <td style="width: 80px; text-align: right;">R$ 9.48</td>
                     <td style="width: 80px; text-align: right;">R$ 189.60</td>
                  </tr>
                  <tr>
                     <td style="width: 300px;">SACO LIXO  POTENZZO  ROLO PRETO 30L 40UN</td>
                     <td style="width: 80px; text-align: center;">20</td>
                     <td style="width: 80px; text-align: right;">R$ 9.48</td>
                     <td style="width: 80px; text-align: right;">R$ 189.60</td>
                  </tr>
                  <tr>
                     <td style="width: 300px;">SACO LIXO  POTENZZO  ROLO PRETO  50L 30UN</td>
                     <td style="width: 80px; text-align: center;">20</td>
                     <td style="width: 80px; text-align: right;">R$ 9.48</td>
                     <td style="width: 80px; text-align: right;">R$ 189.60</td>
                  </tr>
                  <tr>
                     <td style="width: 300px;">SACO LIXO POTENZZO ROLO PRETO 100L 18UN</td>
                     <td style="width: 80px; text-align: center;">20</td>
                     <td style="width: 80px; text-align: right;">R$ 9.48</td>
                     <td style="width: 80px; text-align: right;">R$ 189.60</td>
                  </tr>
                  <tr>
                     <td style="width: 300px;">SACO LIXO POTENZZO  SUPER REFORÇADO 50L  10UN</td>
                     <td style="width: 80px; text-align: center;">50</td>
                     <td style="width: 80px; text-align: right;">R$ 3.79</td>
                     <td style="width: 80px; text-align: right;">R$ 189.60</td>
                  </tr>
                  <tr>
                     <td style="width: 300px;">SACO LIXO  POTENZZO SUPER REFORÇADO 100L  10UN</td>
                     <td style="width: 80px; text-align: center;">25</td>
                     <td style="width: 80px; text-align: right;">R$ 7.58</td>
                     <td style="width: 80px; text-align: right;">R$ 189.60</td>
                  </tr>
                  <tr>
                     <td style="width: 300px;">SACO LIXO POTENZZO SUPER  REFORÇADO  200L  10UN</td>
                     <td style="width: 80px; text-align: center;">25</td>
                     <td style="width: 80px; text-align: right;">R$ 7.58</td>
                     <td style="width: 80px; text-align: right;">R$ 189.60</td>
                  </tr>
                  <tr>
                     <td style="width: 300px;">SACO LIXO POTENZZO  ALMOFADA 100L</td>
                     <td style="width: 80px; text-align: center;">50</td>
                     <td style="width: 80px; text-align: right;">R$ 3.79</td>
                     <td style="width: 80px; text-align: right;">R$ 189.60</td>
                  </tr>
                  <tr>
                     <td style="width: 300px;">SACO LIXO  POTENZZO ALMOFADA 50L </td>
                     <td style="width: 80px; text-align: center;">50</td>
                     <td style="width: 80px; text-align: right;">R$ 3.79</td>
                     <td style="width: 80px; text-align: right;">R$ 189.60</td>
                  </tr>
                  <tr>
                     <td style="width: 300px;">SACO LIXO  POTENZZO ALMOFADA 30L </td>
                     <td style="width: 80px; text-align: center;">50</td>
                     <td style="width: 80px; text-align: right;">R$ 3.79</td>
                     <td style="width: 80px; text-align: right;">R$ 189.60</td>
                  </tr>
                  <tr>
                     <td style="width: 300px;">SACO LIXO POTENZZO  ALMOFADA 15L </td>
                     <td style="width: 80px; text-align: center;">50</td>
                     <td style="width: 80px; text-align: right;">R$ 3.79</td>
                     <td style="width: 80px; text-align: right;">R$ 189.60</td>
                  </tr>
                  <tr>
                     <td style="width: 300px;">SACO LIXO EMBALANDO LIXO  34X38CM PIA BANHEIRO</td>
                     <td style="width: 80px; text-align: center;">25</td>
                     <td style="width: 80px; text-align: right;">R$ 7.58</td>
                     <td style="width: 80px; text-align: right;">R$ 189.60</td>
                  </tr>
                  <tr>
                     <td colspan="4" style="text-align: right;">Totais =&gt; </td>
                  </tr>
               </tbody>
            </table>
         </td>
         <td>
            <div >
               <table>
                  <tbody>
                     <tr>
                        <th >LINHARES &amp; CIA LTDA </th>
                        <th >SUPERMERCADO SAN MARTINS EIRELI </th>
                        <th >NORMA SANGLARD MALOSTO VIDAL EIRELI</th>
                        <th >CONFIAR SUPERMERCADOS LTDA</th>
                        <th >CONFIAR SUPERMERCADOS LTDA</th>
                        <th >JAIRO BRAZ DE SOUZA &amp; CIA LTDA </th>
                        <th >MERCADO E AÇOUGUE FARIA LTDA </th>
                        <th >ESCOBAR GOMES DE SOUZA FILHO (BARRA) </th>
                        <th >SUPERMERCADO MODELO CENTRAL LTDA </th>
                        <th >SUPERMERCADO PAIS &amp; FILHOS RIOBRANQUENSE LTDA </th>
                        <th >SUPERMERCADO LIMA E SOUZA LTDA </th>
                        <th >NORMA SANGLARD MALOSTO VIDAL EIRELI</th>
                        <th >TRIANGULO SUPERMERCADO DE MAR DE ESPANHA LTDA </th>
                        <th >2M COMÉRCIO ALIMENTÍCIO LTDA </th>
                        <th >BAZINHO E FILHOS SUPERMERCADOS LTDA (SANTANA) </th>
                        <th >TRIANGULO SUPERMERCADO DE MAR DE ESPANHA LTDA </th>
                        <th >BACUTIA COMERCIAL LTDA </th>
                        <th >MERCEARIA SILVEIRA EUGENÓPOLIS LTDA/CNPJ </th>
                        <th>Totais</th>
                     </tr>
                     <tr >
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td></td>
                        <td>1</td>
                        <td>3</td>
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td></td>
                        <td>2</td>
                        <td></td>
                        <td>2</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>1</td>
                        <td>14</td>
                     </tr>
                     <tr >
                        <td>1</td>
                        <td>1</td>
                        <td>2</td>
                        <td>2</td>
                        <td></td>
                        <td>2</td>
                        <td>3</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td></td>
                        <td>1</td>
                        <td>1</td>
                        <td>23</td>
                     </tr>
                     <tr >
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>2</td>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>5</td>
                        <td>3</td>
                        <td>2</td>
                        <td>1</td>
                        <td>2</td>
                        <td></td>
                        <td>2</td>
                        <td>2</td>
                        <td></td>
                        <td>1</td>
                        <td>1</td>
                        <td>32</td>
                     </tr>
                     <tr >
                        <td>1</td>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>1</td>
                        <td>1</td>
                        <td>3</td>
                        <td>5</td>
                        <td>3</td>
                        <td>2</td>
                        <td>1</td>
                        <td>2</td>
                        <td></td>
                        <td>3</td>
                        <td>1</td>
                        <td>2</td>
                        <td>1</td>
                        <td>1</td>
                        <td>33</td>
                     </tr>
                     <tr >
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td></td>
                        <td>2</td>
                     </tr>
                     <tr >
                        <td></td>
                        <td></td>
                        <td>1</td>
                        <td>2</td>
                        <td>2</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>2</td>
                        <td></td>
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td>1</td>
                        <td>9</td>
                     </tr>
                     <tr >
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td></td>
                        <td>2</td>
                     </tr>
                     <tr >
                        <td>1</td>
                        <td>1</td>
                        <td>2</td>
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td>2</td>
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td>3</td>
                        <td></td>
                        <td></td>
                        <td>2</td>
                        <td></td>
                        <td>1</td>
                        <td>15</td>
                     </tr>
                     <tr >
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td></td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td></td>
                        <td>2</td>
                        <td></td>
                        <td>1</td>
                        <td>1</td>
                        <td>2</td>
                        <td></td>
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td>1</td>
                        <td>14</td>
                     </tr>
                     <tr >
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>1</td>
                        <td>5</td>
                     </tr>
                     <tr >
                        <td></td>
                        <td>1</td>
                        <td>1</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td>1</td>
                        <td>1</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>1</td>
                        <td>6</td>
                     </tr>
                     <tr >
                        <td></td>
                        <td></td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>1</td>
                        <td></td>
                        <td>4</td>
                     </tr>
                     <tr >
                        <td>6</td>
                        <td>8</td>
                        <td>14</td>
                        <td>11</td>
                        <td>8</td>
                        <td>7</td>
                        <td>16</td>
                        <td>13</td>
                        <td>14</td>
                        <td>6</td>
                        <td>5</td>
                        <td>11</td>
                        <td>7</td>
                        <td>9</td>
                        <td>3</td>
                        <td>8</td>
                        <td>4</td>
                        <td>9</td>
                        <td>159</td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </td>
      </tr>
   </tbody>
</table>

In this code I have two tables.

The table on the left is OK. I can change the width of the TDs normally. But... the table on the right does not accept changing the width of the TDs in any way!

Knowing that this table (the one on the right) is inside a div, so I tried removing the div but it had no effect.

Why does this only occur in the table on the right and not on the left?

How to fix applying a width of 350px to the right table columns?

obs.: This error only happens with the width because the height is normal.

CodePudding user response:

This is happening because your th is setting the width of your cells, the left table has smaller th Titles. The snippet below is showing how you can change it, and I've added an ellipsis style, to deal with when there's not enough space for your title. To set the width individually, you can set a class for each column.

I've used 2 different strategies to deal with it.

max-width on th and min-width on td.

table.produtos_vendidos table {
  border-collapse: collapse;
  border-right: 1px solid #ccc;
}

table.produtos_vendidos table th {
  height: 120px;
  text-align: center;
}

table.produtos_vendidos table th,
table.produtos_vendidos table td {
  padding: 5px;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

table.produtos_vendidos table tr td {
  height: 50px;
}

div.rolante {
  width: 500px;
  overflow-x: scroll;
}

table.produtos_vendidos table tr.prod td {
  text-align: center;
  width: 250px;
}

.prod {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50px;
}
<table >
  <tbody>
    <tr style="vertical-align: top;">
      <td>
        <table>
          <tbody>
            <tr>
              <th style="width: 300px;">PEDIDO</th>
              <th style="width: 80px;">CX</th>
              <th style="width: 80px;">CUSTO UNITÁRIO</th>
              <th style="width: 80px;">CUSTO DA CAIXA</th>
            </tr>
            <tr>
              <td style="width: 300px;">SACO LIXO POTENZZO ROLO PRETO 15L 60UN</td>
              <td style="width: 80px; text-align: center;">20</td>
              <td style="width: 80px; text-align: right;">R$ 9.48</td>
              <td style="width: 80px; text-align: right;">R$ 189.60</td>
            </tr>
            <tr>
              <td style="width: 300px;">SACO LIXO POTENZZO ROLO PRETO 30L 40UN</td>
              <td style="width: 80px; text-align: center;">20</td>
              <td style="width: 80px; text-align: right;">R$ 9.48</td>
              <td style="width: 80px; text-align: right;">R$ 189.60</td>
            </tr>
            <tr>
              <td style="width: 300px;">SACO LIXO POTENZZO ROLO PRETO 50L 30UN</td>
              <td style="width: 80px; text-align: center;">20</td>
              <td style="width: 80px; text-align: right;">R$ 9.48</td>
              <td style="width: 80px; text-align: right;">R$ 189.60</td>
            </tr>
            <tr>
              <td style="width: 300px;">SACO LIXO POTENZZO ROLO PRETO 100L 18UN</td>
              <td style="width: 80px; text-align: center;">20</td>
              <td style="width: 80px; text-align: right;">R$ 9.48</td>
              <td style="width: 80px; text-align: right;">R$ 189.60</td>
            </tr>
            <tr>
              <td style="width: 300px;">SACO LIXO POTENZZO SUPER REFORÇADO 50L 10UN</td>
              <td style="width: 80px; text-align: center;">50</td>
              <td style="width: 80px; text-align: right;">R$ 3.79</td>
              <td style="width: 80px; text-align: right;">R$ 189.60</td>
            </tr>
            <tr>
              <td style="width: 300px;">SACO LIXO POTENZZO SUPER REFORÇADO 100L 10UN</td>
              <td style="width: 80px; text-align: center;">25</td>
              <td style="width: 80px; text-align: right;">R$ 7.58</td>
              <td style="width: 80px; text-align: right;">R$ 189.60</td>
            </tr>
            <tr>
              <td style="width: 300px;">SACO LIXO POTENZZO SUPER REFORÇADO 200L 10UN</td>
              <td style="width: 80px; text-align: center;">25</td>
              <td style="width: 80px; text-align: right;">R$ 7.58</td>
              <td style="width: 80px; text-align: right;">R$ 189.60</td>
            </tr>
            <tr>
              <td style="width: 300px;">SACO LIXO POTENZZO ALMOFADA 100L</td>
              <td style="width: 80px; text-align: center;">50</td>
              <td style="width: 80px; text-align: right;">R$ 3.79</td>
              <td style="width: 80px; text-align: right;">R$ 189.60</td>
            </tr>
            <tr>
              <td style="width: 300px;">SACO LIXO POTENZZO ALMOFADA 50L </td>
              <td style="width: 80px; text-align: center;">50</td>
              <td style="width: 80px; text-align: right;">R$ 3.79</td>
              <td style="width: 80px; text-align: right;">R$ 189.60</td>
            </tr>
            <tr>
              <td style="width: 300px;">SACO LIXO POTENZZO ALMOFADA 30L </td>
              <td style="width: 80px; text-align: center;">50</td>
              <td style="width: 80px; text-align: right;">R$ 3.79</td>
              <td style="width: 80px; text-align: right;">R$ 189.60</td>
            </tr>
            <tr>
              <td style="width: 300px;">SACO LIXO POTENZZO ALMOFADA 15L </td>
              <td style="width: 80px; text-align: center;">50</td>
              <td style="width: 80px; text-align: right;">R$ 3.79</td>
              <td style="width: 80px; text-align: right;">R$ 189.60</td>
            </tr>
            <tr>
              <td style="width: 300px;">SACO LIXO EMBALANDO LIXO 34X38CM PIA BANHEIRO</td>
              <td style="width: 80px; text-align: center;">25</td>
              <td style="width: 80px; text-align: right;">R$ 7.58</td>
              <td style="width: 80px; text-align: right;">R$ 189.60</td>
            </tr>
            <tr>
              <td colspan="4" style="text-align: right;">Totais =&gt; </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <div >
          <table>
            <tbody>
              <tr>
                <th >LINHARES &amp; CIA LTDA </th>
                <th >SUPERMERCADO SAN MARTINS EIRELI </th>
                <th >NORMA SANGLARD MALOSTO VIDAL EIRELI</th>
                <th >CONFIAR SUPERMERCADOS LTDA</th>
                <th >CONFIAR SUPERMERCADOS LTDA</th>
                <th >JAIRO BRAZ DE SOUZA &amp; CIA LTDA </th>
                <th >MERCADO E AÇOUGUE FARIA LTDA </th>
                <th >ESCOBAR GOMES DE SOUZA FILHO (BARRA) </th>
                <th >SUPERMERCADO MODELO CENTRAL LTDA </th>
                <th >SUPERMERCADO PAIS &amp; FILHOS RIOBRANQUENSE LTDA </th>
                <th >SUPERMERCADO LIMA E SOUZA LTDA </th>
                <th >NORMA SANGLARD MALOSTO VIDAL EIRELI</th>
                <th >TRIANGULO SUPERMERCADO DE MAR DE ESPANHA LTDA </th>
                <th >2M COMÉRCIO ALIMENTÍCIO LTDA </th>
                <th >BAZINHO E FILHOS SUPERMERCADOS LTDA (SANTANA) </th>
                <th >TRIANGULO SUPERMERCADO DE MAR DE ESPANHA LTDA </th>
                <th >BACUTIA COMERCIAL LTDA </th>
                <th >MERCEARIA SILVEIRA EUGENÓPOLIS LTDA/CNPJ </th>
                <th>Totais</th>
              </tr>
              <tr >
                <td style="min-width: 80px;">1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td>3</td>
                <td></td>
                <td>1</td>
                <td></td>
                <td></td>
                <td>2</td>
                <td></td>
                <td>2</td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td>14</td>
              </tr>
              <tr >
                <td>1</td>
                <td>1</td>
                <td>2</td>
                <td>2</td>
                <td></td>
                <td>2</td>
                <td>3</td>
                <td>3</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td></td>
                <td>1</td>
                <td></td>
                <td></td>
                <td>1</td>
                <td>1</td>
                <td>23</td>
              </tr>
              <tr >
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>2</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>5</td>
                <td>3</td>
                <td>2</td>
                <td>1</td>
                <td>2</td>
                <td></td>
                <td>2</td>
                <td>2</td>
                <td></td>
                <td>1</td>
                <td>1</td>
                <td>32</td>
              </tr>
              <tr >
                <td>1</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>5</td>
                <td>3</td>
                <td>2</td>
                <td>1</td>
                <td>2</td>
                <td></td>
                <td>3</td>
                <td>1</td>
                <td>2</td>
                <td>1</td>
                <td>1</td>
                <td>33</td>
              </tr>
              <tr >
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td></td>
                <td>2</td>
              </tr>
              <tr >
                <td></td>
                <td></td>
                <td>1</td>
                <td>2</td>
                <td>2</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>2</td>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td>9</td>
              </tr>
              <tr >
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td></td>
                <td></td>
                <td>2</td>
              </tr>
              <tr >
                <td>1</td>
                <td>1</td>
                <td>2</td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>2</td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>3</td>
                <td></td>
                <td></td>
                <td>2</td>
                <td></td>
                <td>1</td>
                <td>15</td>
              </tr>
              <tr >
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td></td>
                <td>2</td>
                <td></td>
                <td>1</td>
                <td>1</td>
                <td>2</td>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td>14</td>
              </tr>
              <tr >
                <td></td>
                <td>1</td>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td>5</td>
              </tr>
              <tr >
                <td></td>
                <td>1</td>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td>6</td>
              </tr>
              <tr >
                <td></td>
                <td></td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>4</td>
              </tr>
              <tr >
                <td>6</td>
                <td>8</td>
                <td>14</td>
                <td>11</td>
                <td>8</td>
                <td>7</td>
                <td>16</td>
                <td>13</td>
                <td>14</td>
                <td>6</td>
                <td>5</td>
                <td>11</td>
                <td>7</td>
                <td>9</td>
                <td>3</td>
                <td>8</td>
                <td>4</td>
                <td>9</td>
                <td>159</td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

CodePudding user response:

By default the width of a <td>/<th> conformed to it's content and the shared space within the width of the <table>. This balancing act can be changed from default: table-layout: auto to fixed.

If you want complete control of the widths of <table> columns:

  • apply table-layout: fixed to <table>

  • set the widths directly to the <th>

  • add the width together and set the width of the <table> to that sum.

It's amazing that your layout had no invalid HTML. There were a lot of mistakes with the widths. On the <th> of the right <table> they had an inline style with a width of 350px, but you also had 250px for the <td> as well. Just set the widths on the <th> and the <td> within that column must conform to the <th> width unless the <td> has colspan of 2 or more. Keep all of your styles in CSS don't use the style property on the HTML tags.

I also added a <thead> to each <table> and a <tfoot> to the left <table>

table table {
  table-layout: fixed;
  border-collapse: collapse;
  border-right: 1px solid #ccc;
}

table table th,
table table td {
  padding: 5px;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

table table td {
  height: 50px;
}

table.west {
  width: 540px;
}

table.west th:first-of-type {
  width: 300px;
}

table.west td {
  text-align: right;
}

table.west td:first-of-type {
  text-align: left;
}

table.west td:nth-of-type(2) {
  text-align: center;
}

table.west th:nth-of-type(n1 2) {
  width: 80px;
}

table.west tfoot td {
  text-align: right;
}

div.rolante {
  width: 500px;
  overflow-x: scroll;
}

table.east {
  width: 4750px;
}

table.east th {
  width: 250px;
}

table.east td {
  text-align: center;
}
<table>
  <tbody>
    <tr>
      <td>
        <table >
          <thead>
            <tr>
              <th>PEDIDO</th>
              <th>CX</th>
              <th>CUSTO UNITÁRIO</th>
              <th>CUSTO DA CAIXA</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>SACO LIXO POTENZZO ROLO PRETO 15L 60UN</td>
              <td>20</td>
              <td>R$ 9.48</td>
              <td>R$ 189.60</td>
            </tr>
            <tr>
              <td>SACO LIXO POTENZZO ROLO PRETO 30L 40UN</td>
              <td>20</td>
              <td>R$ 9.48</td>
              <td>R$ 189.60</td>
            </tr>
            <tr>
              <td>SACO LIXO POTENZZO ROLO PRETO 50L 30UN</td>
              <td>20</td>
              <td>R$ 9.48</td>
              <td>R$ 189.60</td>
            </tr>
            <tr>
              <td>SACO LIXO POTENZZO ROLO PRETO 100L 18UN</td>
              <td>20</td>
              <td>R$ 9.48</td>
              <td>R$ 189.60</td>
            </tr>
            <tr>
              <td>SACO LIXO POTENZZO SUPER REFORÇADO 50L 10UN</td>
              <td>50</td>
              <td>R$ 3.79</td>
              <td>R$ 189.60</td>
            </tr>
            <tr>
              <td>SACO LIXO POTENZZO SUPER REFORÇADO 100L 10UN</td>
              <td>25</td>
              <td>R$ 7.58</td>
              <td>R$ 189.60</td>
            </tr>
            <tr>
              <td>SACO LIXO POTENZZO SUPER REFORÇADO 200L 10UN</td>
              <td>25</td>
              <td>R$ 7.58</td>
              <td>R$ 189.60</td>
            </tr>
            <tr>
              <td>SACO LIXO POTENZZO ALMOFADA 100L</td>
              <td>50</td>
              <td>R$ 3.79</td>
              <td>R$ 189.60</td>
            </tr>
            <tr>
              <td>SACO LIXO POTENZZO ALMOFADA 50L </td>
              <td>50</td>
              <td>R$ 3.79</td>
              <td>R$ 189.60</td>
            </tr>
            <tr>
              <td>SACO LIXO POTENZZO ALMOFADA 30L </td>
              <td>50</td>
              <td>R$ 3.79</td>
              <td>R$ 189.60</td>
            </tr>
            <tr>
              <td>SACO LIXO POTENZZO ALMOFADA 15L </td>
              <td>50</td>
              <td>R$ 3.79</td>
              <td>R$ 189.60</td>
            </tr>
            <tr>
              <td>SACO LIXO EMBALANDO LIXO 34X38CM PIA BANHEIRO</td>
              <td>25</td>
              <td>R$ 7.58</td>
              <td>R$ 189.60</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3">Totais =&gt; </td>
              <td></td>
            </tr>
          </tfoot>
        </table>
      </td>
      <td>
        <div >
          <table >
            <thead>
              <tr>
                <th>LINHARES &amp; CIA LTDA </th>
                <th>SUPERMERCADO SAN MARTINS EIRELI </th>
                <th>NORMA SANGLARD MALOSTO VIDAL EIRELI</th>
                <th>CONFIAR SUPERMERCADOS LTDA</th>
                <th>CONFIAR SUPERMERCADOS LTDA</th>
                <th>JAIRO BRAZ DE SOUZA &amp; CIA LTDA </th>
                <th>MERCADO E AÇOUGUE FARIA LTDA </th>
                <th>ESCOBAR GOMES DE SOUZA FILHO (BARRA) </th>
                <th>SUPERMERCADO MODELO CENTRAL LTDA </th>
                <th>SUPERMERCADO PAIS &amp; FILHOS RIOBRANQUENSE LTDA </th>
                <th>SUPERMERCADO LIMA E SOUZA LTDA </th>
                <th>NORMA SANGLARD MALOSTO VIDAL EIRELI</th>
                <th>TRIANGULO SUPERMERCADO DE MAR DE ESPANHA LTDA </th>
                <th>2M COMÉRCIO ALIMENTÍCIO LTDA </th>
                <th>BAZINHO E FILHOS SUPERMERCADOS LTDA (SANTANA) </th>
                <th>TRIANGULO SUPERMERCADO DE MAR DE ESPANHA LTDA </th>
                <th>BACUTIA COMERCIAL LTDA </th>
                <th>MERCEARIA SILVEIRA EUGENÓPOLIS LTDA/CNPJ </th>
                <th>Totais</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td>3</td>
                <td></td>
                <td>1</td>
                <td></td>
                <td></td>
                <td>2</td>
                <td></td>
                <td>2</td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td>14</td>
              </tr>
              <tr>
                <td>1</td>
                <td>1</td>
                <td>2</td>
                <td>2</td>
                <td></td>
                <td>2</td>
                <td>3</td>
                <td>3</td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td></td>
                <td>1</td>
                <td></td>
                <td></td>
                <td>1</td>
                <td>1</td>
                <td>23</td>
              </tr>
              <tr>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>2</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>5</td>
                <td>3</td>
                <td>2</td>
                <td>1</td>
                <td>2</td>
                <td></td>
                <td>2</td>
                <td>2</td>
                <td></td>
                <td>1</td>
                <td>1</td>
                <td>32</td>
              </tr>
              <tr>
                <td>1</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>1</td>
                <td>1</td>
                <td>3</td>
                <td>5</td>
                <td>3</td>
                <td>2</td>
                <td>1</td>
                <td>2</td>
                <td></td>
                <td>3</td>
                <td>1</td>
                <td>2</td>
                <td>1</td>
                <td>1</td>
                <td>33</td>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td></td>
                <td>2</td>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td>1</td>
                <td>2</td>
                <td>2</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>2</td>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td>9</td>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td></td>
                <td></td>
                <td>2</td>
              </tr>
              <tr>
                <td>1</td>
                <td>1</td>
                <td>2</td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>2</td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>3</td>
                <td></td>
                <td></td>
                <td>2</td>
                <td></td>
                <td>1</td>
                <td>15</td>
              </tr>
              <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td></td>
                <td>2</td>
                <td></td>
                <td>1</td>
                <td>1</td>
                <td>2</td>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td>14</td>
              </tr>
              <tr>
                <td></td>
                <td>1</td>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td>5</td>
              </tr>
              <tr>
                <td></td>
                <td>1</td>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>1</td>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td>6</td>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td>1</td>
                <td>1</td>
                <td>1</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>1</td>
                <td></td>
                <td>4</td>
              </tr>
              <tr>
                <td>6</td>
                <td>8</td>
                <td>14</td>
                <td>11</td>
                <td>8</td>
                <td>7</td>
                <td>16</td>
                <td>13</td>
                <td>14</td>
                <td>6</td>
                <td>5</td>
                <td>11</td>
                <td>7</td>
                <td>9</td>
                <td>3</td>
                <td>8</td>
                <td>4</td>
                <td>9</td>
                <td>159</td>
              </tr>
            </tbody>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

  • Related