Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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.

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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/

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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. 
 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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?

Compartilhar este post


Link para o post
Compartilhar em outros 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í.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
    • Por Felipe Medeiros
      Bom, criei um tema filho e o que aprendi é que para alterar qualquer coisa do tema filho eu preciso copiar o arquivo do tema pai o colocar dentro da pasta do tema filho.
       
      No meu caso, estou usando o tema "Astra" bem famosinho. O arquivo css que quero modificar não está dentro da pasta do tema pai, está em "wp-content/uploads/uag-plugin/assets/0/uag-css-10.css" sendo que o diretorio do tema pai é "wp-content/themes/Astra"
       
      O problema é o seguinte, preciso modificar a barra de pesquisa da pagina inicial, porem o inspetor de elementos do chrome ta acusando que esse arquivo é o responsavel por estilizar a barra de pesquisa. Será que isso tem a ver com "Cache de objetos", eu sei que o plugin liteSpeed Cache, AMP, Rank Math, todos eles tem essas paradas de criar arquivos css e js para tornar o site mais rapido.
    • Por joeythai
      Boa tarde pessoal,
       
      Eu criei um formulário em que tenho 3 interações: evento click, change e uma chamada ajax. No evento on change ("select#removal_table_from" )eu faço uma chamada ajax onde eu passo como parametro o id do item selecionado e construo uma tabela dinamica com o próprio javascript, após isto, tenho um input em que o usuario coloca um valor de percentual para que eu possa preencher em 3 colunas da tabela que foi criada dinamicamente: moto_atualizado, carro_atualizado e caminhao_atualizado, até aí tudo bem, o codigo está fazendo isso, porém, como a tabela é criada dinamicamente eu preciso de alguma forma enviar o arrayData para meu backend mas quando faço o calculo dentro do loop apos resposta do meu ajax, os valores desses 3 campos chegam como null, não sei se é possível fazer o que pretendo ou se é ainda não sei como faz
       
      <code>
           $(document).ready(function (event) {   let arrayData = []; let percentage; let removal_vehicle; let removal_motorcycle; let removal_tuck; let apply_removal = $('#apply_removal');   // apply_removal.on('click', function () { // percentage = $('#percentage').val();   // $('.table-body tr').each(function () {   // let veiculo = $(this).find('.veiculo').text(); // let moto = $(this).find('.moto').text(); // let caminhao = $(this).find('.caminhao').text();   // let removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; // let removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; // let removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   // arrayData.push({ // removal_vehicle, // removal_motorcycle, // removal_tuck // })   // $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); // $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); // $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2)); // }); // });   apply_removal.on('click', function () { percentage = $('#percentage').val();   $('.table-body tr').each(function () {   let veiculo = $(this).find('.veiculo').text(); let moto = $(this).find('.moto').text(); let caminhao = $(this).find('.caminhao').text();   removal_vehicle = parseFloat(veiculo) + (parseFloat(veiculo) * parseFloat(percentage)) / 100; removal_motorcycle = parseFloat(moto) + (parseFloat(moto) * parseFloat(percentage)) / 100; removal_tuck = parseFloat(caminhao) + (parseFloat(caminhao) * parseFloat(percentage)) / 100;   arrayData.push({ removal_vehicle, removal_motorcycle, removal_tuck })   $(this).find('.veiculo_atualizado').val(removal_vehicle.toFixed(2)); $(this).find('.moto_atualizado').val(removal_motorcycle.toFixed(2)); $(this).find('.caminhao_atualizado').val(removal_tuck.toFixed(2));     console.log('Removal Vehicle:', removal_vehicle); console.log('Removal Motorcycle:', removal_motorcycle); console.log('Removal Truck:', removal_tuck); }); });   $('select#removal_table_from').on('change', function (e) { let table_id = $(this).val(); let action = route('removal.removal-values.show', table_id);   $.ajax({ type: "GET", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },   success: function (data) { $('.table-body').empty();   for (let i = 0; i < data.length; i++) { let carro = parseFloat(data[i].CARRO); let moto = parseFloat(data[i].MOTO); let caminhao = parseFloat(data[i].CAMINHAO); let distancia = data[i].DISTANCIA; let origem = data[i].ORIGEM; let destino = data[i].DESTINO; let localidadeOrigem = data[i].LocalidadeOrigem_ID; let localidadeDestino = data[i].LocalidadeDestino_ID;   let newRow = '<tr class="removal-row">' + '<td class="align-middle">' + '<div class="row">' + '<div class="col-1">' + '<span class="font-weight-bold">Origem</span><br>' + '<span class="origem">' + origem + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Destino</span><br>' + '<span class="destino">' + destino + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">KM</span><br>' + '<span class="km">' + distancia + '</span>' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Veículo</span><br>' + '<span class="veiculo">' + carro + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Veículo Atualizado</span><br>' + '<input type="text" class="veiculo_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Moto</span><br>' + '<span class="moto">' + moto + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Moto Atualizado</span><br>' + '<input type="text" class="moto_atualizado">' + '</div>' + '<div class="col-1">' + '<span class="font-weight-bold">Caminhão</span><br>' + '<span class="caminhao">' + caminhao + '</span>' + '</div>' + '<div class="col-2">' + '<span class="font-weight-bold">Caminhão Atualizado</span><br>' + '<input type="text" class="caminhao_atualizado">' + '</div>' + '</div>' + '</div>' + '</td>' + '</tr>';   $('.table-body').append(newRow); //let row = $('.removal-row:last');   // Calcula o valor atualizado e define nos campos diretamente // let veiculo_atualizado = carro + (carro * percentage) / 100; // let moto_atualizado = moto + (moto * percentage) / 100; // let caminhao_atualizado = caminhao + (caminhao * percentage) / 100; // console.log('PORCENTS: ', percentage); //console.log('Veiculo Atualizado:', veiculo_atualizado, 'Moto Atualizado:', moto_atualizado, 'Caminhao Atualizado:', caminhao_atualizado);   // Define os valores diretamente nos campos da nova linha // row.find('.veiculo_atualizado').val(veiculo_atualizado.toFixed(2)); // row.find('.moto_atualizado').val(moto_atualizado.toFixed(2)); // row.find('.caminhao_atualizado').val(caminhao_atualizado.toFixed(2));   arrayData.push({ carro, moto, caminhao, distancia, origem, destino, localidadeOrigem, localidadeDestino, removal_vehicle, removal_motorcycle, removal_tuck }); }   $('#copy_data_table').val(JSON.stringify(arrayData)); }   }); });   //javascript para o formulario de cadastro // $(document).ready(function (event) { $('#uf').change(function () { let code_city = $(this).val(); let deposit = localStorage.getItem('selected_deposit_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city').empty(); $('#deposit').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '<option>'); }   if (data.deposits.length > 0) { for (let i = 0; i < data.deposits.length; i++) { $('#deposit').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '<option>'); } } else { // $('#deposit').prop('disabled', true); // $('#city').prop('disabled', false); }   $('#city').trigger('change'); } });   });   $('#deposit').on('change', function () { depositId = $(this).val(); localStorage.setItem('selected_deposit_id', depositId); });   $('#uf_destiny').change(function () { let code_city = $(this).val(); let depositDestiny = localStorage.getItem('selected_deposit_destiny_id'); let action = route('removal.removal-values.cities', code_city); $.ajax({ type: "POST", url: action, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, data: { code_city: code_city },   success: function (data) {   $('#city_destiny').empty(); $('#deposit_destiny').empty();   for (let i = 0; i < data.cities.length; i++) { $('#city_destiny').append('<option value="' + data.cities[i].NM + '">' + data.cities[i].NM + '</option>'); }   if (data.deposits.length > 0) { // $('#deposit_destiny').prop('disabled', false); //$('#city_destiny').empty(); // $('#city_destiny').prop('disabled', true); for (let i = 0; i < data.deposits.length; i++) { $('#deposit_destiny').append('<option value="' + data.deposits[i].NM + '">' + data.deposits[i].NM + '</option>'); } } else { // $('#deposit_destiny').prop('disabled', true); // $('#city_destiny').prop('disabled', false); }   $('#city_destiny').trigger('change'); } }); });   $('#deposit_destiny').on('change', function () { let depositDestinyId = $(this).val(); localStorage.setItem('selected_deposit_destiny_id', depositDestinyId); });   }); </code>
    • Por babylon
      Olá galera tudo bem?
      Deixa eu perguntar, estava mexendo no meu site e queria adicionar em html essa tabela porem esta dando erro pois fica assim:
       

      Porem gostaria que ficasse assim:

      Segue o código da tabela:
      <center><table border="0">
          <tr>
      <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Bicicleta<br> <font color="#0092df">..</font>Track Bikes<br> <font color="#0092df">..</font>Aro 29 TKS</b></a></span><br><br><font size="5"><center><span style="background-color: #A1CD44">DE:</span></font> <br><font size="5"><s>R$ 1.999,99</center></font></s> </td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itembicicleta.jpg"><br><font size="5"><center><span style="background-color: #A1CD44">COM - 60%:</span></font> <br><font size="5">1.199,99</font></center></a></td>
             <td><font color="#ffffff">....</font></td>
              <td bgcolor="#0092df" width="24%"><a href="/categorias?ename=smartphones"><span style="font-size: 20px; color: #ffffff;"><b> <font color="#0092df">..</font>Monitor 24"<br> <font color="#0092df">..</font>Samsung<font color="#0092df">aa.aa</font><br> <font color="#0092df">..</font>1ms 144hz</b></a></span></center></td><td><p><a href="/categorias?ename=smartphones"><img src="/static/img/itemmonitor.jpg"></a></td>
          </tr>
          </table></center>
      O que estaria errado, pois não sei como colocar nessa tabela outro fundo de outra cor, veja que usei td bgcolor="#0092df" para o azul escuro mas não sei como usaria pro "#e4f1fb" para o fundo ficar de azul claro em baixo bem como não ficou correto em altura o "DE:" com o "COM - 60%:".
      Bom é isso, obg.


×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.