HTML formatting

Question

HTML formatting

Asked 5 years, 5 months ago

Viewed 50 times

-1

I have a little problem regarding an HTML code :

Is there any possibility of breaking the form line above ?

Code

{
    head:"<style>
body {
    font-family: Calibri;
    font-size: 12pt;
    width: 210mm;
    text-transform: uppercase;
}

.logo>img{
    float:right;
    height:?IIF(cFilAnt == '0101', 50, 230)?px;
}

table, tr, td, th {
    border-width: thin; 
    border-style: solid;
    border-collapse: separate;
    text-transform: uppercase;
}

th {
    background-color: #F0FFF0;
    white-space: nowrap
}

td {
    white-space: nowrap
}

tr {
    white-space: nowrap
    page-break-after: right
}

.itemTotal {
    font-weight: bold;
    font-style: italic;
}

tr>:first-child>:first-child {
    max-width:105mm;
    max-height:200px;
}

tr>:nth-child(7), tr>:nth-child(6), tr>:nth-child(5), tr>:nth-child(4), tr>:nth-child(2) {
    text-align: center;
    text-transform: uppercase;
}

tbody>:last-child>:nth-child(6), tbody>:nth-last-child(2)>:nth-child(6), tbody>:nth-last-child(3)>:nth-child(6){
    text-align: center;
    text-transform: uppercase;
}

.company {
    font-weight: bold;
    text-transform: uppercase;
}

.fieldName {
    font-weight: bold;
    text-transform: uppercase;
}

.span2 {
    position: absolute;
    left: 105mm;
}

.span3 {
    position: absolute;
    left: 150mm;
}

.pageBreak {
    page-break-after: auto;

}

body>:last-child .pageBreak {
    page-break-after: avoid;
}

.printButton {
    float:top;
    position:fixed;
    top:0;
    height: 100px;
    width: 100%;
    background-color: eeee00;
}

.midinfo {
    text-align:center;
    text-transform: uppercase;
}

table {
    width:210mm
}

@media print
{    

    @page {
       @bottom-left {
            content: counter(page) \"/\" counter(pages);
        }
     }
    .no-print, .no-print *
    {
        display: none;
    }
}
tfoot { display:table-footer-group }
.supertable{
    border: 1px;
    width: 900mm;
    }


</style>",
    browser:"chrome.exe",
    iniBody:"<tr><table class=\"supertable\">
                <tfoot> 
                </tfoot>
                <tr class=\"supertable\"><td class=\"supertable\">
            </tr>   
            <div class=\"printButton, no-print\">
            <a href=\"javascript:window.print()\" rel=\"nofollow\"><img src=\"http://3.bp.blogspot.com/-RDDqoEKk8ps/UtMe1KDXIJI/AAAAAAAA02A/EAxkZwdARz4/s1600/imprimir.png\" /></a></div>
            ",
    endBody:"",
    PEDIDO:"<span class=\"logo\"><img src=\"?SB1->(SmUriImage(GetMV('MV_LOGPDV'), 'logoPDV'))?\"/></span>
            <div class=\"company\">

                <div>?SmProper(oFil:Get('NOME'))?</div>
                <br/>
            </div>
                <div class=\"companyInfo\">
                <div><b>CNPJ:</b> ?SmProper(oFil:Get('CNPJ'))? - <b>I.E.:</b> ?SmProper(oFil:Get('IE'))?</div>
                <div>
                    <span><b>Endereço:</b> ?SmProper(oFil:Get('ENDERECO') + ' - ' + oFil:Get('BAIRRO') + ' - ' + oFil:Get('CIDADE') + ' - ' + oFil:Get('UF'))?</span> 

                </div>
                <div><b>Emails:</b> [email protected]  –  [email protected]</div>
                <div>               [email protected]</div>
                <div><b>Telefone Comercial:</b> (31) 2516-8084 / 2555-9081 - <b>Whatsapp.:</b> (31) 99730-8390</div>
                <hr class=\"line\" #IIF(cFilAnt != '0101', 'width=\"80%\" align=\"left\"', '')#/>
            </div>",
    CABECALHO:" <br/>
                <span class=\"span2\"><b>DATA:</b> ?SC5->C5_EMISSAO?</div>
                <div><b>VENDEDOR(A):</b> ?SmProper(Posicione('SA1', 1, SC5->C5_VEND1, 'A1_NOME'))?</div>
                <br/>
                <div><span><b>FANTASIA:</b> ?SmProper(SA1->A1_NREDUZ)?</span></div>
                <div><span><b>CPF/CNPJ:</b> ?JustChars(SA1->A1_CGC, '0123456789-')?</span><span class=\"span2\"><b>I.E.:</b> ?JustChars(SA1->A1_INSCR, '0123456789-')?</span></div>
                <div><span><b>END.:</b> ?SmProper(SA1->A1_END)?</span><span class=\"span2\"><b>CEP:</b> ?JustChars(SA1->A1_CEP, '0123456789-')?</span></div>
                <div><span><b>BAIRRO:</b> ?SmProper(SA1->A1_BAIRRO)?</span><span class=\"span2\"><b>CIDADE:</b> ?SmProper(SA1->A1_MUN) + ' - ' + SmProper(SA1->A1_EST)?</span></div>
                <div><span><b>TEL.:</b> ?SmProper(SA1->A1_FONE)?</span><span class=\"span2\"><b>CEL.:</b> ?SmProper(SA1->A1_CELULAR)?</span></div>
                <div><span><b>EMAIL:</b> ?Lower(SA1->A1_EMAIL)?</span><span class=\"span2\"><b>CONTATO:</b> ?SmProper(SA1->A1_CONTATO)? </span><span class=\"span3\"><b>CONTATO 2: </b>?SmProper(SC5->C5_CONTATO)?</span></div>
                <br/>
                <br/>",
    ITENS:{
            OPEN:"<table>
                        <tr>
                        <th><div class=\"fieldName\">ITEM</div></th>
                        <th><div class=\"fieldName\">CÓDIGO.</div></th>
                        <th><div class=\"fieldName\">DESCRIÇÃO DO PRODUTO.</div></th>
                        <th><div class=\"fieldName\">QTDE.</div></th>
                        <th><div class=\"fieldName\">MARCA.</div></th>
                        <th><div class=\"fieldName\">ANVISA.</div></th>
                        <!--<th><div class=\"fieldName\">UN.</div></th>-->
                        <th><div class=\"fieldName\">PREÇO UNIT.</div></th>
                        <th><div class=\"fieldName\">VALOR TOTAL.</div></th>
                        </tr>",     
            CLOSE:"<tr>
                        <td/>
                        <td/>
                        <td/>
                        <td>
                        <div class=\"itemTotal\">?nQuant?</div>
                        </td>
                        <td/>
                        <td/>
                        <td>
                            <div class=\"itemTotal\">Sub Total:
                        <td/>   
                            <div class=\"itemTotal\"><b>R$ </b>?ApplyPict('C5_VALBRUT',, SC5->(C5_VALBRUT + C5_VALDESC))?</div>

                        </td>
                    </tr>
                    <tr>
                        <td/>
                        <td/>
                        <td/>
                        <td/>
                        <td/>
                        <td/>
                        <td>
                            <div class=\"itemTotal\">Desconto:</div>
                        </td>
                        <td>
                            <div class=\"itemTotal\"><b>R$ </b>?ApplyPict('C5_VALDESC')?</div>
                        </td>
                    </tr>
                    <tr>
                        <td/>
                        <td/>
                        <td/>
                        <td/>
                        <td/>
                        <td/>
                        <td>
                            <div class=\"itemTotal\">Total Líquido:</div>
                        </td>
                        <td>                        
                            <div class=\"itemTotal\"><b>R$ </b>?ApplyPict('C5_VALBRUT')?</div>
                        </td>
                    </tr>
                </table>
                <br/>"
            },
    ITEM:"<tr>
                    <td>?SmProper(SC6->C6_ITEM)?</td>
                    <td>?SmProper(SB1->B1_CODPROD)?</td>
                    <td><p>?SmProper(SB1->B1_OBSCOM)?<br/></p></td>
                    <td>?SC6->C6_QUANT?</td>
                    <td>?SmProper(SC6->C6_OBS)?</td>
                    <td>?SmProper(SB1->B1_CODANV)?</td>
                    <td><b>R$ </b>?ApplyPict('C6_PRCUNI')?</td>
                    <td><b>R$ </b>?ApplyPict('C6_TOTAL')?</td>
        </tr>",
    RODAPE:"<p>
            <div>
                <b>PRAZO DE ENTREGA:</b> ATÉ 3 DIAS ÚTEIS APÓS EMISSÃO
            </div>
            <br/>
            <div>
                <b>CONDIÇÃO DE PAGTO:</b> 
                ?SE6->E6_DESCRI?
            </div>
            <br/>
            <div>
            <b>FORMA DE PAGTO:</b> ?SmProper(Posicione('SEA', 1, SC5->C5_NUM, 'EA_DESCRI'))?
            </div>
            <br/>
            <div><b>FRETE:</b> ?GetCmbDsc(, 'C5_TPFRETE', SC5->C5_TPFRETE) + '  ' + IIF(SC5->C5_TPFRETE=='1', 'POR CONTA DO REMETENTE', 'POR CONTA DO DESTINATÁRIO')?</div>
            <br/>
            <div>
                <b>OBSERVAÇÃO:</b> 
                ?SC5->C5_MENNOTA?
                ?SmProper(Posicione('SM4', 1, SC5->C5_MENPAD1, 'M4_FORMULA'))?
                ?SmProper(Posicione('SM4', 1, SC5->C5_MENPAD2, 'M4_FORMULA'))?
                ?SmProper(Posicione('SM4', 1, SC5->C5_MENPAD3, 'M4_FORMULA'))?
                ?SmProper(Posicione('SM4', 1, SC5->C5_MENPAD4, 'M4_FORMULA'))?
            </div>
            </p><br/><br/><br/><br/><br/><br/><br/>


<div class=\"pageBreak\"></div></td></tr></table>"
}

The table is filled in by hand or comes from the Bank ? Pq vc does not limit the width of the table can not?

– hugocsl

2019/05/28 at 16:43
1

@hugocsl the table would break normally, only the author’s CSS is "prohibiting" it. It’s a problem the author himself created.

– Bacco

2019/10/26 at 18:25

1 answer

Browser other questions tagged html

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

by KlausEverWalkingDev • 36 points · Answer 1 · 2019-10-26T16:52:09+00:00

You can do what it shows that answer is a similar question in Stack Overflow:

You can do it by setting a width for the table and you can also use
word-wrap:break-word;
to prevent too long words from exceeding the limits of the table.

It is more interesting to set the width in a CSS:

Edited to include
table-layout:fixed;
in the CSS below

Example: http://jsbin.com/atonut/1/edit
table {
width:500px;
table-layout:fixed;
}


td {
word-wrap:break-word;
}
If your problem is the amount of text and not necessarily long words, use only width, and let the word "break" automatically.

I hope this helps.