Problemas ao criar relatório em html

HTML

CSS

16/06/2020

Pessoal, estou implementando o html para o layout de um relatório esboçado pelo meu colega, porém ao dá iniciativa da implementação, não está idêntico ao que ele desenhou. Alguém poderia me ajudar? Sou iniciante.

Esse é o meu html implementado:
<style>
    table {
        border-collapse: collapse;
        margin-left: 0;
    }
    div.conteudodatabela {
        overflow: visible;
    }
    table > tbody {
        overflow: visible;
    }
    /*adds control for test purposes*/
    thead td {
        font-size: 11pt;
    }
    tfoot td {
        text-align: center;
        font-size: 9pt;
    }
    thead {
        display: table-header-group;
        margin-bottom: 10px
    }
    tfoot {
        display: table-footer-group;
    }
    thead th, thead td {
        position: static;
    }
    thead tr {
        position: static;
    }
    /*prevent problem if print after scrolling table*/
    table tfoot tr {
        position: static;
    }
    /* table */
    .checkbox {
        width: 20px;
        height: 20px;
        border: 1px solid black;
        text-align: center;
        float: left;
        margin-right: 10px;
        font-size: 150%;
    }
    .foo { writing-mode: vertical-lr; }
    .border {
         border: 1px solid black;
    }
    table{
        font-weight: 800;
        font-size: 80%;
        width: 100%;
        margin: 10px;
        margin-bottom: 20px;
    }
    .bg{
        background: rgb(230,230,230);
    }
    .h1{
        font-size: 120%;
    }
    .center{
      text-align: center;
    }
    .semi-full-width{
        width: 80%;
    }
    .row{
        margin: 50px;
    }
    .p-1{
        margin: 30px;
        margin-bottom: 40px;
        margin-top: 40px;
        padding: 8px;
    }
    .textovertical{
      writing-mode: horizontal-tb;  
      width:11px;
      word-wrap: break-word;
      font-family: Arial, Helvetica, sans-serif; 
      white-space: pre-wrap;
    }
    tr{
        margin: 10px;
        margin-bottom: 50px;
    }
    .m-r{
        margin-right: 830px;
    }
    .padding_master {
        padding: 30px;
    }
    .conteiner{
        font-size: 90%;
    }
    .table td{
        border: 1px solid black;
        padding: 1px;
        margin: 0px;
    }
    .lineBottom-inLine{
        /* <p> */
        border-bottom: 1px solid black;
        display: inline;
    }
    .lineBottom{
        /* <p> */
        border-bottom: 1px solid black;
    }
    .no-border{
        border: 0px;
    }    
    .no-space{
        margin: 1px;
        padding: 1px;
    }
    .no-bold{
        font-weight: 500;
    }
    .space-p p{
        margin: 1px; padding: 1px;
    }
    .tr-center td{
        text-align: center;
    }
    .regras p{
        margin: 0px;
    }
</style>
<style type="text/css" media="print">
    @page { size: auto;  margin: 0mm; }
</style>
<div class="table" runat="server" style="margin: 1 auto;">
    <div>
        <table style="padding: 0px; margin: 0px;" class="no-bold">
            <tr class="center">
                <td class="textovertical">Contratação</td>
                <td colspan="2">Origem Dívida</td>
                <td>Credor</td>
                <td colspan="2">Devedor</td>
                <td>Credor</td>
            </tr>
            <tr class="tr-center">
                <td class="textovertical" id="border" rowspan="4" style="width:43px">Direta</td>
                <td class="textovertical" id="border" colspan="" rowspan="1">Interna</td>
                <td id="border" colspan="2" rowspan="">teste25</td>
                <td id="border" colspan="2" rowspan="">teste12</td>
                <td>teste 1</td>
            </tr>
            <tr class="tr-center">
                <td id="border" rowspan="1">Externa</td>
                 <td id="border" colspan="2" rowspan="3"> teste20</td>
                 <td id="border" colspan="2" rowspan="">teste40</td>
                 <td>teste 1</td>
            </tr>
        </table>
    </div>
    <br/>
    <br/>
</div>


Essa é o layout que meu colega elaborou.
https://www.facebook.com/photo?fbid=1607283452754647&set=gm.2993225587381291
Robson Amaral

Robson Amaral

Curtidas 0

Respostas

Ricardo Arraes

Ricardo Arraes

16/06/2020

Fala Robson, beleza?
cara, a pagina está indisponível (pelo menos, pra mim está...)
GOSTEI 0
Robson Amaral

Robson Amaral

16/06/2020

Fala Robson, beleza?
cara, a pagina está indisponível (pelo menos, pra mim está...)


Sabe me informar como eu faço para colocar a imagem aqui para que todos possam visualizar? ou se vc tem algum email que eu possa enviar essa imagem?
GOSTEI 0
Ricardo Arraes

Ricardo Arraes

16/06/2020

Fala Robson, beleza?
cara, a pagina está indisponível (pelo menos, pra mim está...)


Sabe me informar como eu faço para colocar a imagem aqui para que todos possam visualizar? ou se vc tem algum email que eu possa enviar essa imagem?


você pode usar o google drive ou algum outro site para disponibilizar essa imagem na web.
ai você faz o upload da imagem e posta aqui a url de acesso

um site bom pra isso é:
https://imageshack.us/
(tem trial de 30 dias)
GOSTEI 0
Robson Amaral

Robson Amaral

16/06/2020

Fala Robson, beleza?
cara, a pagina está indisponível (pelo menos, pra mim está...)


Sabe me informar como eu faço para colocar a imagem aqui para que todos possam visualizar? ou se vc tem algum email que eu possa enviar essa imagem?


você pode usar o google drive ou algum outro site para disponibilizar essa imagem na web.
ai você faz o upload da imagem e posta aqui a url de acesso

um site bom pra isso é:
https://imageshack.us/
(tem trial de 30 dias)


Ricardo. Agora vc consegue visualizar a imagem do layout de como deve ser implementado o html? Eu Já tentei de tudo aqui para deixar igual, mas sou leigo, e iniciante no html, to tentando trabalhar com esse rowspan e cowspan, mas tá complicado de deixar o relatório igual.

https://drive.google.com/file/d/1cgxh2IKu6KcVEMmLEEgorYqBtjpgHNgs/view?usp=sharing
GOSTEI 0
Ricardo Arraes

Ricardo Arraes

16/06/2020


Fala Robson, beleza?
cara, a pagina está indisponível (pelo menos, pra mim está...)


Sabe me informar como eu faço para colocar a imagem aqui para que todos possam visualizar? ou se vc tem algum email que eu possa enviar essa imagem?


você pode usar o google drive ou algum outro site para disponibilizar essa imagem na web.
ai você faz o upload da imagem e posta aqui a url de acesso

um site bom pra isso é:
https://imageshack.us/
(tem trial de 30 dias)


Ricardo. Agora vc consegue visualizar a imagem do layout de como deve ser implementado o html? Eu Já tentei de tudo aqui para deixar igual, mas sou leigo, e iniciante no html, to tentando trabalhar com esse rowspan e cowspan, mas tá complicado de deixar o relatório igual.

https://drive.google.com/file/d/1cgxh2IKu6KcVEMmLEEgorYqBtjpgHNgs/view?usp=sharing


fiz a solicitação de acesso, aceita la, por favor
GOSTEI 0
Robson Amaral

Robson Amaral

16/06/2020


Fala Robson, beleza?
cara, a pagina está indisponível (pelo menos, pra mim está...)


Sabe me informar como eu faço para colocar a imagem aqui para que todos possam visualizar? ou se vc tem algum email que eu possa enviar essa imagem?


você pode usar o google drive ou algum outro site para disponibilizar essa imagem na web.
ai você faz o upload da imagem e posta aqui a url de acesso

um site bom pra isso é:
https://imageshack.us/
(tem trial de 30 dias)


Ricardo. Agora vc consegue visualizar a imagem do layout de como deve ser implementado o html? Eu Já tentei de tudo aqui para deixar igual, mas sou leigo, e iniciante no html, to tentando trabalhar com esse rowspan e cowspan, mas tá complicado de deixar o relatório igual.

https://drive.google.com/file/d/1cgxh2IKu6KcVEMmLEEgorYqBtjpgHNgs/view?usp=sharing


fiz a solicitação de acesso, aceita la, por favor


Opa Ricardo, vlw mano, aceitei lá para vc visualizar a imagem.
GOSTEI 0
Ricardo Arraes

Ricardo Arraes

16/06/2020

Cara, pra ser sincero contigo eu tambem nunca fiz esse tipo de tabela tão ramificada, de cabeça não sei como ficaria, mas acredito que olhando a documentação seja facil resolver.
Infelizmente não estou com tanto tempo para lhe ajudar a construir mas recomendo que voce verifique a documentação da w3school:

https://www.w3schools.com/html/html_tables.asp

além de boa explicação e bons exemplos, eles oferecem vários exercícios pra voce treinar tambem
GOSTEI 0
Robson Amaral

Robson Amaral

16/06/2020

Cara, pra ser sincero contigo eu tambem nunca fiz esse tipo de tabela tão ramificada, de cabeça não sei como ficaria, mas acredito que olhando a documentação seja facil resolver.
Infelizmente não estou com tanto tempo para lhe ajudar a construir mas recomendo que voce verifique a documentação da w3school:

https://www.w3schools.com/html/html_tables.asp

além de boa explicação e bons exemplos, eles oferecem vários exercícios pra voce treinar tambem

Consegui resolver o problema. Muito obrigado!
GOSTEI 0
POSTAR