Jump to content
Vitor Bueno

Forçar Tamanho de Table sem colocar TR's e TD's

Recommended Posts

Preciso da seguinte solução, tenho uma table com uma imagem de fundo, estou imprimindo cartas com esse código, essa imagem e um papel timbrado, e coloco o texto dentro de td's, mas quando não tem tamanho suficiente, a imagem de fundo e cortada, queria saber como posso fazer pela table, para mostrar toda a imagem, já tenho o tamanho dela( Largura:800px e Altura:1122px), não coloquei em div pelo fato de quando vem muitos dados não consigo quebrar a pagina automaticamente, e já por table ele quebra sozinho sem eu precisar ficar colocando page-break no meio do Código, o único problema que as vezes não vem dados o suficiente para mostrar a tabela, e assim acaba cortando a mesma.

Share this post


Link to post
Share on other sites

Acho melhor você mudar um pouco.

 

Ao invés de usar um TABLE é melhor você usar um DIV com a altura, largura e imagem de fundo que você deseja. Os elementos você pode posicionar, e melhor, como estão dentro do div, você pode até usar o position:absolute para posicionar exatamente onde você deseja.

 

Com isso não tem o risco de cortar e ainda tem melhor flexibilidade para posicionar o texto

Share this post


Link to post
Share on other sites
3 horas atrás, Pita disse:

Acho melhor você mudar um pouco.

 

Ao invés de usar um TABLE é melhor você usar um DIV com a altura, largura e imagem de fundo que você deseja. Os elementos você pode posicionar, e melhor, como estão dentro do div, você pode até usar o position:absolute para posicionar exatamente onde você deseja.

 

Com isso não tem o risco de cortar e ainda tem melhor flexibilidade para posicionar o texto


Realmente Pita,  antes fiz com div, mas o meu problema, e pelo fato de ser uma impressão, e as vezes vem muitos itens que vão nesta carta, realizando a quebra de pagina, e quando quebra a pagina, eu ja perco o espaço do topo que dei, e a imagem de fundo.Eu fiz um codigo que conta por exemplo 5 itens, e pula de pagina, fecha a div anterior com a imagem, e abre uma nova, com todas as margens e etc, ficou legal, porem queria algo mais automatico, do jeito que esta , ta muito manual, eu decidindo a quebra de pagina, queria q quebrasse e colocasse a imagem de fundo e as margens automatico. 

Abaixo um Exemplo do meu codigo:
https://jsfiddle.net/VitorBueno/w3rsz0qg/2/

Share this post


Link to post
Share on other sites

Sinceramente não consigo entender o que está tentando fazer... Por que não tenta desenhar, literalmente falando. Faz um desenho de como está e de como deveria ficar e anexa aqui.

Mas se eu entendi bem o que você está tentando fazer, então o grande problema se encontra em sua imagem de fundo, ou seja, se você vai possuir um conteúdo dinâmico, que varia de carta para carta, então talvez você não deva utilizar a imagem da forma como ela está. Talvez você deva recortá-la, em mais ou menos 3 pedaços: Cabeçalho, corpo e rodapé. Com as tres partes da imagem em mãos, então você criar uma div com a imagem do cabeçalho, outra div com a imagem do corpo (a imagem da gota dágua) e a ultima div como rodapé da imagem. Sendo que a div do meio ( gota dágua) teria um tamanho dinamico expandido de acordo com o tamanho do conteúdo. E quanto a quebra de página, uma sugestão seria limitar a quantidade de caracteres até o limite de uma página, ao chegar nesse limite você gera a carta e caso ainda reste algum texto, limpe o conteúdo anterior e recomece o processo de digitação.

Share this post


Link to post
Share on other sites
1 hora atrás, BonnerUnit disse:

Sinceramente não consigo entender o que está tentando fazer... Por que não tenta desenhar, literalmente falando. Faz um desenho de como está e de como deveria ficar e anexa aqui.

Mas se eu entendi bem o que você está tentando fazer, então o grande problema se encontra em sua imagem de fundo, ou seja, se você vai possuir um conteúdo dinâmico, que varia de carta para carta, então talvez você não deva utilizar a imagem da forma como ela está. Talvez você deva recortá-la, em mais ou menos 3 pedaços: Cabeçalho, corpo e rodapé. Com as tres partes da imagem em mãos, então você criar uma div com a imagem do cabeçalho, outra div com a imagem do corpo (a imagem da gota dágua) e a ultima div como rodapé da imagem. Sendo que a div do meio ( gota dágua) teria um tamanho dinamico expandido de acordo com o tamanho do conteúdo. E quanto a quebra de página, uma sugestão seria limitar a quantidade de caracteres até o limite de uma página, ao chegar nesse limite você gera a carta e caso ainda reste algum texto, limpe o conteúdo anterior e recomece o processo de digitação.


Certo assim, Digamos tenho uma carta, com um texto qualquer, e algumas lista de itens, cada linha um item digamos, tipo 1-Computador 2-Mouse e etc, cada item desse seria uma linha, e no fundo dessa carta tem um imagem de um timbrado, que esse meu texto e itens vai gerar por cima dele, essa imagem no caso vai ser o background da div mãe, e assim quando é só uma folha ok, mas as vezes a quantidade de itens vai ser maior, ocupando outra folha, e nessa outra folha alem de vir esses itens, precisa vir também o mesmo timbrado e todas as margens.

Eu já fiz uma função que conta os itens, quando chega numa certa quantidade, ele fecha a div mãe, quebra a pagina, e começa a div mãe novamente, com a imagem de fundo e a margem do topo ok, porem preciso disso de forma automática, sem eu barrar quando chegar numa certa quantidade, pois as vezes um item vai ocupar uma linha, as vezes duas,três.....  e não da pra ter um valor certo de quantos itens posso deixar para não Zuar a impressão.

Não posso usar o exemplo que falou de ter uma imagem para o começo e outra para a final, pois essa imagem tem um topo,uma marca no meio da pagina, e um rodapé com endereço, conforme mandei o link,  e também porque todas as paginas tem que ter essa mesma imagem de fundo, com todas as margens.

Então assim, eu preciso de uma forma automática de o sistema quebrar a pagina, e quando quebrar refazer o background da div e colocar as margens, não posso quebrar a pagina manualmente pois não fica num padrão legal. 
 

Share this post


Link to post
Share on other sites

Não existe uma forma automática, tem que ir controlando de alguma forma.

 

O que você poderia fazer, talvez funcione assim, não se, precisa testar é:

Continuar usando a tabela e no final você verifica a altura da tabela(via JQuery), se a altura não der o tamanho de uma página(o um múltiplo da altura) você adiciona na tabela um TR+TD com a altura que está faltando.

 

 

 

  • +1 1

Share this post


Link to post
Share on other sites

Acho que você não entendeu o que eu quis dizer sobre o recorte de imagens Vitor. Eu te faria um exemplo, entretanto no momento eu não disponho de tempo, mas, caso não tenha solucionado seu problema até amanhã, eu postarei um exemplo. Mas talvez você não deva fazer uma função que conte os itens, pois como você mesmo falou as vezes um item ocupa uma linha inteira as vezes não. Dessa forma talvez você devesse ter um controle maior sobre o número de linhas que caberão em cada folha. Outro ponto importante que não mencionou é a origem dos itens. Eles estão vindo do banco de dados, ou você os insere manualmente?

Share this post


Link to post
Share on other sites

Então Vitor, não sei se você já solucionou sua questão, mas caso ainda não a tenha solucionado eu desenvolvi um projeto que talvez atenda as suas necessidades. Basta enviá-lo para o servidor e acessar.

Segue o anexo: Carta.zip

Qualquer coisa posta aí.

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 Articulando
      Galera, seguinte. Estou tentando criar um evento em javascript que funciona da seguinte maneira; existem 5 checkbox na tela, ao selecionar dois checkbox os outros irão travar e não permitir o clique, se o usuário clicar novamente retirando a seleção de algum dos que foi selecionado ele volta a habilitar. Até então o código funciona blz, porém agora eu preciso fazer com que os dois primeiros checkbox contém como um único clique, ou seja, são 2 checkbox para travar, porém se eu selecionar o primeiro e o segundo eles contam como um, então eu o usuário poderia realizar outro clique em algum checkbox e ficariam 3 checkbox selecionados, porém isso só se aplica aos dois primeiros checkbox, caso não sejam eles é apenas dois cliques, se eles forem clicados o usuário pode escolher mais uma opção.
       
      o código atual está assim:
       
      <script type="text/javascript">
                  (function(){
                      "use strict";
                      var marcados = 0;
                      var verifyCheckeds = function($checks) {
                          if( marcados>=2 ) {
                              loop($checks, function($element) {
                                  $element.disabled = $element.checked ? '' : 'disabled';
                              });
                          } else {
                              loop($checks, function($element) {
                                  $element.disabled = '';
                              });
                          }
                      };
                      var loop = function($elements, cb) {
                          var max = $elements.length;
                          while(max--) {
                              cb($elements[max]);
                          }
                      }
                      var count = function($element) {
                          return $element.checked ? marcados + 1 : marcados - 1;
                      }
                      window.onload = function(){
                          var $checks = document.querySelectorAll('input[type="checkbox"][name="modalidades[]"]');
                          loop($checks, function($element) {
                              $element.onclick = function(){
                                  marcados = count(this);
                                  verifyCheckeds($checks);
                              }
                              if($element.checked) marcados = marcados + 1;
                          });
                          verifyCheckeds($checks);
                      }
                  }());
              </script>
       
       
      Quem conseguir me ajudar eu agradeço, preciso muito desse código rodando. 
    • By Vinicius Bazan
      Bom dia, Boa tarde e Boa noite!
       
        Estava eu aqui brincando um pouco com JS para entender um pouco melhor essa linguagem, pois eu preciso fazer um relógio em uma pagina HTML e um contador que aumente seu número em +1 de tempos em tempos ( no caso eu estava testando em aumentar a cada 5 segundos, considerando que esse número não vai começar do 0, pois ele teria que pegar todos os segundos que já se passaram nesse dia e dividir por 5, assim seu resultado inteiro seria exibido).
        O relógio com bastante esforço e pesquisa eu consegui fazer e está funcionando, até aqui sem dificuldades, o real problema está no contador, eu fui testar sem colocar um setInterval só para ver se o número aparece na tela e... NADA!
       Então como eu não manjo de JS e tentei fazer a partir do que eu usei pra fazer o relógio eu devo ter errado feio em muita coisa.
       
      <!DOCTYPE html> <html> <head> <title>javascript</title> <meta charset="utf-8"> <script type="text/javascript"> function relogio() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); if (horas < 10) { horas = "0"+horas; } if (minutos < 10) { segundos = "0"+minutos; } if (segundos < 10) { segundos = "0"+segundos; } document.getElementById("relogio").innerHTML=horas+":"+minutos+":"+segundos; } window.setInterval("relogio()",1000); // Aqui começa a função que eu tentei fazer para o contador function contador() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); var cont = ((minutos + (horas * 60))*60) + segundos ; document.getElementById("contador").innerHTML= Math.floor(cont/5); } </script> <style type="text/css"> #relogio { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } #contador { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } </style> </head> <body onload="relogio();"> <div id="relogio"> </div> <hr> <div id="contador"> </div> </body> </html>  
       Se alguém puder me ajudar eu agradeço!
    • By egalauber
      Tenho o seguinte trecho de código:
       
      #anima {
              width:600px;
              height:300px;
              margin:auto;
              
              animation: banner 10s infinite;
          }
       
      @keyframes banner {
              0%, 33% {
                      background:#009;
                  }
              34%, 66% {
                      background:#C00;
                  }
              67%, 100% {
                      background:#390;
                  }
          }
       
      No HTML tenho uma div com id=anima.
      Esse código faz a cada 3 segundos mudar a cor dessa div, tipo como se fosse um slide show.
       
      O que eu preciso fazer, é colocar 3 botões, cada botão mudando pra uma cor. Cada botão mudando pra um pedaço da execução do @keyframes banner.
       
      Botão1 - pula para-> 0%, 33% { background:#009; }
      Botão2 - pula para-> 34%, 66% { background:#C00; }
      Botão3 - pula para-> 67%, 100% { background:#390; }
       
      Como?
×

Important Information

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