TDs of only a table not accept width - html

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 class="produtos_vendidos">
<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 => </td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="rolante">
<table>
<tbody>
<tr>
<th class="prod">LINHARES & CIA LTDA </th>
<th class="prod">SUPERMERCADO SAN MARTINS EIRELI </th>
<th class="prod">NORMA SANGLARD MALOSTO VIDAL EIRELI</th>
<th class="prod">CONFIAR SUPERMERCADOS LTDA</th>
<th class="prod">CONFIAR SUPERMERCADOS LTDA</th>
<th class="prod">JAIRO BRAZ DE SOUZA & CIA LTDA </th>
<th class="prod">MERCADO E AÇOUGUE FARIA LTDA </th>
<th class="prod">ESCOBAR GOMES DE SOUZA FILHO (BARRA) </th>
<th class="prod">SUPERMERCADO MODELO CENTRAL LTDA </th>
<th class="prod">SUPERMERCADO PAIS & FILHOS RIOBRANQUENSE LTDA </th>
<th class="prod">SUPERMERCADO LIMA E SOUZA LTDA </th>
<th class="prod">NORMA SANGLARD MALOSTO VIDAL EIRELI</th>
<th class="prod">TRIANGULO SUPERMERCADO DE MAR DE ESPANHA LTDA </th>
<th class="prod">2M COMÉRCIO ALIMENTÍCIO LTDA </th>
<th class="prod">BAZINHO E FILHOS SUPERMERCADOS LTDA (SANTANA) </th>
<th class="prod">TRIANGULO SUPERMERCADO DE MAR DE ESPANHA LTDA </th>
<th class="prod">BACUTIA COMERCIAL LTDA </th>
<th class="prod">MERCEARIA SILVEIRA EUGENÓPOLIS LTDA/CNPJ </th>
<th>Totais</th>
</tr>
<tr class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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.


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 class="produtos_vendidos">
<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 => </td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="rolante">
<table>
<tbody>
<tr>
<th class="prod">LINHARES & CIA LTDA </th>
<th class="prod">SUPERMERCADO SAN MARTINS EIRELI </th>
<th class="prod">NORMA SANGLARD MALOSTO VIDAL EIRELI</th>
<th class="prod">CONFIAR SUPERMERCADOS LTDA</th>
<th class="prod">CONFIAR SUPERMERCADOS LTDA</th>
<th class="prod">JAIRO BRAZ DE SOUZA & CIA LTDA </th>
<th class="prod">MERCADO E AÇOUGUE FARIA LTDA </th>
<th class="prod">ESCOBAR GOMES DE SOUZA FILHO (BARRA) </th>
<th class="prod">SUPERMERCADO MODELO CENTRAL LTDA </th>
<th class="prod">SUPERMERCADO PAIS & FILHOS RIOBRANQUENSE LTDA </th>
<th class="prod">SUPERMERCADO LIMA E SOUZA LTDA </th>
<th class="prod">NORMA SANGLARD MALOSTO VIDAL EIRELI</th>
<th class="prod">TRIANGULO SUPERMERCADO DE MAR DE ESPANHA LTDA </th>
<th class="prod">2M COMÉRCIO ALIMENTÍCIO LTDA </th>
<th class="prod">BAZINHO E FILHOS SUPERMERCADOS LTDA (SANTANA) </th>
<th class="prod">TRIANGULO SUPERMERCADO DE MAR DE ESPANHA LTDA </th>
<th class="prod">BACUTIA COMERCIAL LTDA </th>
<th class="prod">MERCEARIA SILVEIRA EUGENÓPOLIS LTDA/CNPJ </th>
<th>Totais</th>
</tr>
<tr class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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 class="prod">
<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>


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: 6650px;
}
table.east th {
width: 350px;
}
table.east td {
text-align: center;
}
<table>
<tbody>
<tr>
<td>
<table class="west">
<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 => </td>
<td></td>
</tr>
</tfoot>
</table>
</td>
<td>
<div class="rolante">
<table class="east">
<thead>
<tr>
<th>LINHARES & 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 & 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 & 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

jQuery how to use .nextAll() in a html table

I am to create function where when input 100 in row3, row4 and row5 the rows below it will also get 100 inserted into them. I am using nextAll() to try to do this but I think it doesn't work because the rows are not together in an order. Is there some thing I am not doing right?
$("input[id^=row]").on("change", function() {
$(this).nextAll("input[id^=row]").val($(this).val());
console.log($(this).val())
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<th>Year</th>
<th>Age</th>
<th>Annual Premium<br>(Beginning of Year)</th>
<th>Benefits<br>(End of Year)</th>
<th>Time</th>
<th>Policyholder's Cashflow</th>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td id='annual0'>0</td>
<td id='benefit0'><input class='row' id='row0'></td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td id='annual1'>0</td>
<td id='benefit1'><input class='row' id='row1'></td>
<td>1</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>5</td>
<td id='annual2'>0</td>
<td id='benefit2'><input class='row' id='row2'></td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td id='annual3'>0</td>
<td id='benefit3'><input class='row' id='row3'></td>
<td>3</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>7</td>
<td id='annual4'>0</td>
<td id='benefit4'><input class='row' id='row4'></td>
<td>4</td>
<td></td>
</tr>

$("input[id^=row]").on("input", function() {
$(this).nextAll("input[id^=row]").val($(this).val());
console.log($(this).val())
});
<tr>
<th>Year</th>
<th>Age</th>
<th>Annual Premium<br>(Beginning of Year)</th>
<th>Benefits<br>(End of Year)</th>
<th>Time</th>
<th>Policyholder's Cashflow</th>
</tr>
<tr>
<td>1</td>
<td>3</td>
<td id='annual0'>0</td>
<td id='benefit0'><input class='row' id='row'></td>
<td>0</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>4</td>
<td id='annual1'>0</td>
<td id='benefit1'><input class='row' id='row1'></td>
<td>1</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>5</td>
<td id='annual2'>0</td>
<td id='benefit2'><input class='row' id='row2'></td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>6</td>
<td id='annual3'>0</td>
<td id='benefit3'><input class='row' id='row3'></td>
<td>3</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>7</td>
<td id='annual4'>0</td>
<td id='benefit4'><input class='row' id='row4'></td>
<td>4</td>
<td></td>
</tr>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
try on("input") instead of on('change'),

HTML table for use in medical diagnostics

I am trying to reproduce the following table in HTML
I have reached the following structure with the following code
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 2px solid black;
}
.vertical-text {
transform: rotate(270deg);
transform-origin: left top 0;
}
</style>
</head>
<body>
<table>
<caption>Stadializarea nefropatiei diabetice</caption>
<thead>
<tr>
<td rowspan="11">60</td>
<th colspan="4"></th>
<th colspan="4">Persistent albuminuria categories<br>Description and range
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td colspan="4"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>60</td>
<td colspan="4"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>60</td>
<td colspan="4"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>60</td>
<td colspan="4">Stadializarea CKD in functie<br> de filtrarea glomerulara si albuminurie</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>60</td>
<td colspan="4"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>60</td>
<td colspan="4"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>60</td>
<td colspan="4"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>60</td>
<td colspan="4"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>60</td>
<td>G1</td>
<td>Normal of high</td>
<td>>90</td>
<td>Stadiu</td>
<td bgcolor="red"></td>
<td bgcolor="blue"></td>
<td bgcolor="orange"></td>
</tr>
<tr>
<td>60</td>
<td>G1</td>
<td>Normal of high</td>
<td>>90</td>
<td>Stadiu</td>
<td bgcolor="red"></td>
<td bgcolor="blue"></td>
<td bgcolor="orange"></td>
</tr>
<tr>
<td>60</td>
<td>G1</td>
<td>Normal of high</td>
<td>>90</td>
<td>Stadiu</td>
<td bgcolor="red"></td>
<td bgcolor="blue"></td>
<td bgcolor="orange"></td>
</tr>
<tr>
<td>60</td>
<td>G1</td>
<td>Normal of high</td>
<td>>90</td>
<td>Stadiu</td>
<td bgcolor="red"></td>
<td bgcolor="blue"></td>
<td bgcolor="orange"></td>
</tr>
<tr>
<td>60</td>
<td>G1</td>
<td>Normal of high</td>
<td>>90</td>
<td>Stadiu</td>
<td bgcolor="red"></td>
<td bgcolor="blue"></td>
<td bgcolor="orange"></td>
</tr>
<tr>
<td>60</td>
<td>G1</td>
<td>Normal of high</td>
<td>>90</td>
<td>Stadiu</td>
<td bgcolor="red"></td>
<td bgcolor="blue"></td>
<td bgcolor="orange"></td>
</tr>
</tbody>
</table>
</html>
But I can not:
- merge the nine cells of the first column (with the 60s) with the nine cells of the second column (and eliminate their left and upper border);
- merge the cells 10-15 of the first column, so I can enter some vertical text in there;
without altering the current layout. I appreciate any suggestion. Is there an easier way than a html table to implement this?

Here's the starting HTML you need:
table, td {
border:1px solid #999;
}
td {
width: 50px;
height: 20px;
}
<table>
<tr>
<td colspan="4" rowspan="4"></td>
<td colspan="3"></td>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="6"></td>
<td>G1</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>G2</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>G3a</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>G3b</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>G4</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>G5</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Set margin for every CSS page-break start

Pardon me for the title, i couldn't find more accurate description for it.
I'm breaking a long rows in a table into several pages.
Everything is ok with page-break-after for TR.
My only problem is, it starts at very beginning and ends at very bottom of a page making my header & footer covered with table data.
I tried putting margin and padding everywhere but none seems to work.
Below is my CSS,
#media print {
html, body {
width: 210mm;
height: 297mm;
background:#fff;
}
.page-layout {
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
table.report { page-break-after:auto }
table.report tr { page-break-inside:avoid; page-break-after:auto }
table.report td { page-break-inside:avoid; page-break-after:auto }
table.report thead { display:table-header-group; margin-top:50px; }
table.report tfoot { display:table-footer-group }
.header {
display:block;
position:fixed;
top: 0px;
font-weight:bold;
font-size:14px;
text-align:right;
right:0px;
}
.footer {
z-index: 1;
position: fixed;
left: 0;
bottom: 0;
text-align: left;
left: 0;
width:100%;
display:block;
}
}
Below is my HTML
<div class="header">MY HEADER</div>
<div class="page-layout">
<div style="font-weight:bold; font-size:14px; text-align:center; margin-bottom:20px">REPORT TITLE</div>
<table width="100%" border="1" style="border-collapse:collapse" class="report">
<thead>
<tr>
<th width="10%">Col1</th>
<th width="60%">Col2</th>
<th width="10%">Col3</th>
<th width="20%">Col4</th>
</tr>
</thead>
<tbody>
<?php for ($x=1; $x<100; $x++) {//loop ?>
<tr>
<td align="center"><?=$x?></td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<?php } //endloop ?>
</tbody>
</table>
</div>
<div class="footer">MY FOOTER</div>
Here is what it looks like when printing,

After intensive research on the net, i found that there is no proper way to do it.
There is a discussion about #page rule that likely what i intended to achieve. Unfortunately it didn't work. I learned that this feature have not been implemented on most browser yet. I don't know which browser support it.
Finally, i have came across some trick. THEAD and TFOOT are designed to repeat on print. So i put a blank row on the thead top, leaving an empty space every time it was repeated, just enough for the header to show up. And also an empty row below tfoot for footer area.
Unfortunately, tfoot didn't repeat itself on chrome. IE and Firefox are ok.

If you have this kind of problems when after and before table start needs some extra space for other page footer, like this:
you can fix it this way:
<style>
#media print {
.table-breaked {
page-break-before: auto;
}
.no-border{
border: none !important;
}
.footer-repeat {
display: table-footer-group;
}
}
</style>
<div class="table-breaked">
<table class="pt-20">
<thead>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<!-- add extra space for printing -->
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<!-- add extra space for printing -->
<tr>
<th class="text-center">Value 1<br/>№ Date</th>
<th class="text-center">Value 2</th>
<th class="text-center">Value 3</th>
<th class="text-center">Value 4</th>
<th class="text-center">Value 5</th>
</tr>
</thead>
<tbody>
<!-- more trs here -->
<tr>
<th>Data</th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
<th>Data</th>
</tr>
</tbody>
<tfoot class="footer-repeat">
<!-- add repeated tfoot for extra space -->
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
<tr class="no-border">
<td class="no-border"> </td>
</tr>
</tfoot>
</table>
</div>
Here is a result:

You can use
#page{
size: A4;
margin-top: 50px;
margin-bottom: 50px;
}

Adding page-break-inside:avoid to the cells worked for me:
table td, table th {
page-break-inside: avoid;
}

I've been able to solve this for my use case by setting position: relative; top: 100px; on the top-most element.

Try this
#media print {
html, body {
width: 210mm;
height: 297mm;
background:#fff;
}
.page-layout {
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
table.report { page-break-after:auto }
table.report tr { page-break-inside:avoid; page-break-after:auto }
table.report td { page-break-inside:avoid; page-break-after:auto }
table.report thead { display:table-header-group; margin-top:50px; }
table.report tfoot { display:table-footer-group }
.header {
display:block;
position:fixed;
top: 0px;
font-weight:bold;
font-size:14px;
text-align:right;
right:0px;
}
.footer {
z-index: 1;
position: fixed;
left: 0;
bottom: 0;
text-align: left;
left: 0;
width:100%;
display:block;
}
}
<div class="header">MY HEADER</div>
<div class="page-layout">
<div style="font-weight:bold; font-size:14px; text-align:center; margin-bottom:20px">REPORT TITLE</div>
<table width="100%" border="1" style="border-collapse:collapse" class="report">
<thead>
<tr>
<th width="10%">Col1</th>
<th width="60%">Col2</th>
<th width="10%">Col3</th>
<th width="20%">Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">1</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">2</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">3</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">4</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">5</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">6</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">7</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">8</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">9</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">10</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">11</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">12</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">13</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">14</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">15</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">16</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">17</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">18</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">19</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">20</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">21</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">22</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">23</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">24</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">25</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">26</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">27</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">28</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">29</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">30</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">31</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">32</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">33</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">34</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">35</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">36</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">37</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">38</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">39</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">40</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">41</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">42</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">43</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">44</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">45</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">46</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">47</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">48</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">49</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">50</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">51</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">52</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">53</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">54</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">55</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">56</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">57</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">58</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">59</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">60</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">61</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">62</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">63</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">64</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">65</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">66</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">67</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">68</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">69</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">70</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">71</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">72</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">73</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">74</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">75</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">76</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">77</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">78</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">79</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">80</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">81</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">82</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">83</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">84</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">85</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">86</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">87</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">88</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">89</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">90</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">91</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">92</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">93</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">94</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">95</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">96</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">97</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">98</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
<tr>
<td align="center">99</td>
<td></td>
<td align="center"></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="footer">MY FOOTER</div>

Create table html as the image

https://jsfiddle.net/tn7rd9sq/
I need create the table of this image:
<table border='1'>
<tr>
<th rowspan="3">text</th>
<th colspan="2">text</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>other text</td>
<td>2</td>
<td>2</td>
</tr>
</table>
I do not know how to do the part when there are 3 together

td {
width: 20px;
height: 20px;
}
td.wider {
width: 60px;
}
tr.taller {
height: 40px;
}
<table border='1'>
<tr class="taller">
<td class="wider" rowspan="3"></td>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

HTML: td layout issue

Really couldn't draw something good here, so drew it in Excel.
Here is I tried to render some code in HTML:
<table>
<thead>
<th>
<th>
<th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<p></p>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<table>

Use colspan to merge across columns like so:
<tr>
<td colspan="3">This is how I want it to look</td>
</tr>
Demo

<table border=1>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="3">7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>

th,
td {
border: 1px solid #cfcfcf;
padding: 10px;
}
<table>
<tr>
<th>TH</th>
<th>TH</th>
<th>TH</th>
</tr>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<td colspan=3>TD</td>
</tr>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
</tr>
</table>