Jump to content
rtavix

Problemas na implementação no html do relatório

Recommended Posts

Pessoal, alguem sabe como eu posso transformar esse relatório em html? comecei a implementar o código de html, mas não está igual rs. Esse é meu html, que não consegui fazer ficar igual da imagem em anexo, se alguém puder me ajudar agradeço.

 

<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 é a imagem  do link de como deveria ficar a estrutura do relatório.

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By lezão
      Ola boa tarde!
      Td bem com vcs?
       
      Alguém poderia me dar uma luz, de como fazer essas imagens ficar a frente do slideshow e qnd responsivo aparecer de 3 em 3.
       
       
      obrigado pela atenção.

    • By RukasuNiiChan
      ========== Meu Projeto ==========
      * Introdução
      Bem , eu estou no ultimo ano do E.M , e com essa pandemia , algumas adaptações foram tomadas , como todos sabem , a AULA ONLINE , porem , na minha escola não se utiliza a verificação de presença ( Chamada ) por Vídeo , através de um WebCam , e sim a confirmação por digitalização , todos os alunos devem escrever " ok " quando o respectivo professor digitar " chamada " no chat:
      Exemplo 1: https://prnt.sc/uiw9jy
      * Ideia
      Então o que eu pensei , A Ideia Inicial era criar um BOT para identificar a palavra " Chamada " no chat , e então , automaticamente , ele escrevesse " ok " ou " Presente " para assim automatizar o processo e facilitar a minha vida.
      Porem eu descobri uma funcionalidade no Google que são as extensões para o Google Meet que até então eu não sabia que existiam
      Entretanto se alguém que não tem experiencia em extensões mas tem em engenharia de software , me ajudaria da mesma forma
      * Conclusão
      Enfim , a minha ideia é automatizar o processo de " Responder a chamada " durante a aula online ,  como sou um estudante de programação queria muito a ajuda de vocês pra isso , pois meu conhecimento é leigo , qualquer duvida sobre o projeto , podem responder a este tópico pois , irei responder dentro de 24 horas , ou se o interesse nele for grande , me chamem na DM do Discord ( Rukasu#7321 ) 
      ===============================
       
    • By Leonel57
      Prezados,
      Fiz um menu lateral mas ao colocar várias imagens ao lado elas ficam na parte de baixo.
      Ele é um menu de produtos.
      Poderiam me ajudar?
      <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> <style type="text/css"> .container { border: 1px solid gray; display: inline-block; float: right; margin-right: 150px; margin-left: 300px; border-spacing: 5px; padding: :5px; } p { text-align:center; } .menulateral{ background-color:#5F9EA0; width: 250px; height: 1000px; } ul{ list-style: none; } ul li a{ display: block; font-size: 18px; font-family: 'Arial'; padding: 10px; border-bottom: solid 1px #FFFFF0; color: #ccc; text-decoration: none; } ul li span{ float: right; padding-right: 10px; } ul li a:hover{ background-color: #5b859a; } .conteudo{ display: table; } </style> </head> <body> <nav class = menulateral> <ul> <li><a href="racao-cachorro.html">Ração para Cachorros</a></li> <li><a href="">Peticos e Ossos</a></li> <li><a href="">Casas e Tocas</a></li> <li><a href="">Coleiras</a></li> <li><a href="">Tapetes e Fraldas</a></li> <li><a href="">Briquendos</a></li> <li><a href="">Camas e Cobertores</a></li> <li><a href="">Portões</a></li> <li><a href="">Grades</a></li> </ul> <ul> <li><a href="petisco-gato.html">Petiscos para Gatos</a></li> <li><a href="areia-gato.html">Areia</a></li> <li><a href="">Beleza e Limpeza</a></li> <li><a href="">Arranhadores e Brinquedos</a></li> <li><a href="">Coleiras e Peitorais</a></li> <li><a href="">Roupas</a></li> </ul> <ul> <li><a href="alimentacao-passaro.html">Alimentacao</a></li> <li><a href="gaiola-passaro.html">Gaiolas</a></li> <li><a href="">Puleiro</a></li> <li><a href="">Acessorios</a></li> <li><a href="">Farmácia</a></li> </ul> <ul> <li><a href="alimentacao-peixe.html">Alimentacao</a></li> <li><a href="aquario-peixe.html">Aquários</a></li> <li><a href="">Decoração</a></li> </ul> </nav> <nav class = "conteudo"> <div class="container"> <img src="imagem/areiagato.png" height="100" width="100" /> <p>This is image 1</p> </div> <div class="container"> <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" /> <p>This is image 2</p> </div> <div class="container"> <img src="imagem/quatree.png" height="100" width="100" /> <p>This is image 3</p> </div> <div class="container"> <img src="imagem/areiagato.png" height="100" width="100" /> <p>This is image 1</p> </div> <div class="container"> <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" /> <p>This is image 2</p> </div> <div class="container"> <img src="imagem/quatree.png" height="100" width="100" /> <p>This is image 3</p> </div> <div class="container"> <img src="imagem/areiagato.png" height="100" width="100" /> <p>This is image 1</p> </div> <div class="container"> <img class="middle-img" src= "imagem/bravecto.png" height="100" width="100" /> <p>This is image 2</p> </div> <div class="container"> <img src="imagem/quatree.png" height="100" width="100" /> <p>This is image 3</p> </div> </div> </nav> </body> </html>  



    • By emmanuelsiqueira30
      Pessoal boa tarde.
      Gostaria de saber como posso pegar os valores da linha na tabela <table> que eu clicar no link visualizar dados na coluna opções e aparecer dados do banco daquela linha.
       
       
       
       
    • By daviassumpcao
      Estou buscando uma orientação ou referência para desenvolver algo similar ao formulário dessa página do iPhone https://www.apple.com/shop/buy-iphone/iphone-se ... quando selecionamos alguma opção, a div que contém o formulário centralizar na página e rola feito um carrossel. Estou completamente perdido com essa demanda que recebi... agradeço antecipadamente a todos que derem uma força. Abraço
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.