Create table html as the image

Create table html as the image - html

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>

Related

TDs of only a table not accept width

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>

Html table - Not sure how to size certain <td>'s individually

Curious how to make a TD cell bigger without adjusting the height of the entire row?
I know I can do do inline styling with "rowspan= 7", but that centers the data in the middle of the cell.
I am trying to build a table like this image and don't know how to size "Some Data" and "Other Data" cells like so..
table {
text-align: center;
border: 1px solid black;
border-collapse: collapse;
}
td {
width: 30vw;
border: 1px solid black;
}
<table>
<tr>
<td></td>
<td>Heading</td>
<td>Heading 2</td>
</tr>
<tr>
<td rowspan="8">Some Data</td>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td rowspan="8">Other Data</td>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
</table>

Simply add a class to the table cells with rowspan. I used the class: .rowspan. Then use css to declare: vertical-align: top; and the issue is solved.
table {
text-align: center;
border: 1px solid black;
border-collapse: collapse;
}
td {
width: 30vw;
border: 1px solid black;
}
.rowspan {
vertical-align: top;
}
<table>
<tr>
<td></td>
<td>Heading</td>
<td>Heading 2</td>
</tr>
<tr>
<td rowspan="8" class="rowspan">Some Data</td>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td>X</td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td>546</td>
<td></td>
</tr>
<tr>
<td rowspan="8" class="rowspan">Other Data</td>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td>Y</td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
<tr>
<td>123</td>
<td></td>
</tr>
</table>

Adding a table line to the row

I have several php generated tables like below, and I tried to add a table line on the 3rd and 4th row but I failed.
What I tried is this:
table.tbc td:nth-child(3) {
border-bottom: 0.12em solid #000000;
}
<table class='tbc'>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<td></td>
</tr>
</table>
How can I do this? I know this is an unusual table structure.

If I understand you correctly, you want to add a border between the 3rd and 4th trs. If so, the right selector is table.tbc tr:nth-child(3) td
table.tbc tr:nth-child(3) td {
border-bottom: 0.12em solid #000000;
}
<table class='tbc'>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>A</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>E</td>
</tr>
<tr>
<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>

How do I replicate the exact layout of the attached document?

Hi
The form is a word document and I have been trying to recreate it exactly as is with html but having difficulty unfotunately.
This is what I have so far. Perhaps, css is the reason why it isn't laying out correctly.
Thanks for your assistance.
CSS - Must have:
<style type="text/css">
table .mystyle
{
border-width: 0 0 1px 1px;
border-spacing: 0;
border-collapse: collapse;
border-style: solid;
border-color:#000;
width:900px;
}
.mystyle td, .mystyle th
{
margin: 0;
padding: 4px;
border-width: 1px 1px 0 0;
border-style: solid;
font-size:medium;
border-color:#000;
}
</style>
Current html:
<table class="mystyle">
<tr>
<td style="width:50px;" class="style7"> </td>
<td style="width:158px;" class="style7">Milestone</td>
<td style="width:158px;" class="style7">Owner</td>
<td style="width:108px;white-space:nowrap;">
<TABLE border="1">
<TR>
<TD colspan="2">Completion Date</TD>
</TR>
<TR>
<TD>Target</TD>
<TD>Actual</TD>
</TR>
</TABLE>
</td>
<td style="width:358px;" class="style7">Comments</td>
</tr>
<tr>
</tr>
</table>
Extreme left are Qtr 1 through Qtr4

The key to laying out that table is using rowspan and colspan attributes.
http://tinker.io/174de/1
<table class="mystyle">
<thead>
<tr>
<th rowspan="2">Quarter</th>
<th rowspan="2">Milestone</th>
<th rowspan="2">Owner</th>
<th colspan="2">Completion Date</th>
<th rowspan="2">Comments</th>
</tr>
<tr>
<th>Target</th>
<th>Actual</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">Q1</th>
<td>a</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>b</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>c</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<th rowspan="3">Q2</th>
<td>a</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>b</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>c</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Create table html as the image - html

Related

TDs of only a table not accept width

Html table - Not sure how to size certain <td>'s individually

Adding a table line to the row

Set margin for every CSS page-break start

How do I replicate the exact layout of the attached document?

Categories

Resources