Ir para conteúdo

Arquivado

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

evandrosr

Ajustar Tabela na página WordPress

Por , em Desenvolvimento com Wordpress

Recommended Posts

evandrosr    0

evandrosr
Postado

Estou quebrando a cabeça para ajustar uma tabela em um site responsivo... encontrei um script q resolveu meu problema para incorporar uma tabela feita em .html (<iframe src ="tabela.html" width="770" height="1650" frameborder="0" scrolling="no">
</iframe> ) mas ocorre que essa tabela não se ajusta de acordo com o site.. a tabela fica sempre do mesmo tamanho.

Fiz uma mudança e deu certo em partes, ("770" troquei por "100%") deu certo na largura, mas na altura corta parte da tabela... tentei colocar 100% no "height" também, mas não deu certo.

Desde de já agradeço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

evandrosr    0

evandrosr
Postado
html:


<!DOCTYPE html>


<head>

<meta charset="utf-8" />

<title>eletronico</title>

<link href="eletronico-web-resources/css/eletronico.css" rel="stylesheet" type="text/css" />

</head>

<body id="eletronico" xml:lang="pt-BR">

<div class="Quadro-de-texto-b-sico">

<table id="table-1" class="Tabela-b-sica">

<colgroup>

<col class="Row-Column-1" />

<col class="Row-Column-2" />

<col class="Row-Column-3" />

<col class="Row-Column-4" />

</colgroup>

<tbody>

<tr class="Row-Column-5">

<td class="cell-style-override-1">

<p class="Par-grafo-b-sico para-style-override-1">Produtos</p>

</td>

<td class="cell-style-override-1">

<p class="Par-grafo-b-sico para-style-override-1">Código</p>

</td>

<td class="cell-style-override-1">

<p class="Par-grafo-b-sico para-style-override-1">Descrição</p>

</td>

<td class="cell-style-override-1">

<p class="Par-grafo-b-sico para-style-override-1">Emb.</p>

</td>

</tr>

<tr class="Row-Column-7">

<td class="cell-style-override-2">

<p class="Par-grafo-b-sico para-style-override-2"><span><img class="frame-6" src="eletronico-web-resources/image/24240.png" alt="24240.png" /></span></p>

</td>

<td class="cell-style-override-2">

<p class="Par-grafo-b-sico para-style-override-2">206</p>

</td>

<td class="cell-style-override-2">

<p class="Par-grafo-b-sico para-style-override-2">Sensor de Presença de Teto - Placa 4x4 Redonda</p>

</td>

<td class="cell-style-override-2">

<p class="Par-grafo-b-sico para-style-override-2">04</p>

</td>

</tr>

<tr class="Row-Column-7">

<td class="cell-style-override-2">

<p class="Par-grafo-b-sico para-style-override-2"><span><img class="frame-8" src="eletronico-web-resources/image/24234.png" alt="24234.png" /></span></p>

</td>

<td class="cell-style-override-2">

<p class="Par-grafo-b-sico para-style-override-2">207</p>

</td>

<td class="cell-style-override-2">

<p class="Par-grafo-b-sico para-style-override-2">Sensor de Presença de Teto - Externo</p>

</td>

<td class="cell-style-override-2">

<p class="Par-grafo-b-sico para-style-override-2">04</p>

</td>

</tr>

<tr class="Row-Column-7">

<td class="cell-style-override-2">

<p class="Par-grafo-b-sico para-style-override-2"><span><img class="frame-8" src="eletronico-web-resources/image/24224.png" alt="24224.png" /></span></p>

</td>

<td class="cell-style-override-2">

<p class="Par-grafo-b-sico para-style-override-2">208</p>

</td>

<td class="cell-style-override-2">

<p class="Par-grafo-b-sico para-style-override-2">Sensor de Presença Articulado</p>

</td>

<td class="cell-style-override-2">

<p class="Par-grafo-b-sico para-style-override-2">04</p>

</td>

</tr>

<tr class="Row-Column-10">

<td class="cell-style-override-2">

<p class="Par-grafo-b-sico para-style-override-2"><span><img class="frame-9" src="eletronico-web-resources/image/24215.png" alt="24215.png" /></span></p>

</td>

<td class="cell-style-override-2">

<p class="Par-grafo-b-sico para-style-override-2">210</p>

</td>

<td class="cell-style-override-2">

<p class="Par-grafo-b-sico para-style-override-2">Rele fotoeletrônico</p>

</td>

<td class="cell-style-override-2">

<p class="Par-grafo-b-sico para-style-override-2">04</p>

</td>

</tr>

</tbody>

</table>

<p class="Par-grafo-b-sico para-style-override-3"></p>

</div>

</body>

</html>


css:


body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {

margin:0;

padding:0;

border-width:0;

}

td, th {

border-style:solid;

border-width:1px;

border-color: #999 /*cor da borda*/

}

table {

border-collapse:collapse;

}

li {

display:block;

}

body {

font-size:12px;

-epub-hyphens:auto;

}

table.Tabela-b-sica {

border-color:#000000;

border-style:solid;

border-width:1px;

margin-bottom:-4px;

margin-top:4px;

}

p.Par-grafo-b-sico {

-epub-ruby-position:over;

color:#000000;

font-family:"Minion Pro", serif;

font-size:12px;

font-style:normal;

font-variant:normal;

font-weight:normal;

line-height:1.2;

margin-bottom:0px;

margin-left:0px;

margin-right:0px;

text-align:left;

text-decoration:none;

text-indent:0px;

}

td.cell-style-override-1 {

background-color:#c2c3c9;

padding-bottom:5px;

padding-right:5px;

padding-top:5px;

}

td.cell-style-override-2 {

padding-bottom:6px;

padding-left:3px;

padding-right:6px;

padding-top:6px;

}

p.para-style-override-1 {

color:#ffffff;

font-family:Tahoma, sans-serif;

font-size:13px;

font-style:normal;

font-weight:bold;

text-align:center;

}

p.para-style-override-2 {

font-family:"Zurich Cn BT", sans-serif;

font-size:13px;

font-style:normal;

font-weight:normal;

text-align:center;

}

p.para-style-override-3 {

font-family:"Zurich Cn BT", sans-serif;

font-size:8px;

font-style:normal;

font-weight:normal;

}

col.Row-Column-1 {

width:77px;

}

col.Row-Column-2 {

width:76px;

}

col.Row-Column-3 {

width:558px;

}

col.Row-Column-4 {

width:56px;

}

tr.Row-Column-5 {

min-height:49px;

}

img.frame-6 {

height:60px;

width:60px;

}

tr.Row-Column-7 {

min-height:72px;

}

img.frame-8 {

height:60px;

width:38px;

}

img.frame-9 {

height:43px;

width:60px;

}

tr.Row-Column-10 {

min-height:55px;

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

PetrusHenrique    5

PetrusHenrique
Postado

Amigo, por que você não coloca o código da cabela inteira no lugar do iframe?

Não entendi muito bem isso ainda.

 

O problema é que você tem que definir uma altura pra iframe, e dessa forma ele nunca ficara responsivo na altura.

Compartilhar este post

Link para o post
Compartilhar em outros sites

evandrosr    0

evandrosr
Postado

LastK, eu já fiz o teste colocando os 100% no "width" e ele se ajusta perfeitamente na largura, mas na altura corta uma boa parte da tabela... tentei colocar os 100% no "height" também mas não funcionou... O motivo pelo qual eu estou usando desta forma é pela facilidade de gerar a tabela pelo InDesign... são muitas tabelas q sofrerá alteração constantes.

 

Se a tabela não cortasse na parte inferior ficaria perfeito.. seria exatamente oq eu preciso.

 

Caso não haja uma solução com iframe, ai sim terei q jogar de outra forma e com isso terei um trabalho muito grande.

 

Desde de já obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

PetrusHenrique    5

PetrusHenrique
Postado

Amigo, eu entendi mais ou menos.

Acredito qe está tentando minimizar o trabalho colocando um iframe chamando o arquivo tabela.html em várias páginas. Atualizando o arquivo tabela.html, essas várias páginas são atualizadas, correto?

 

Entretanto essa não é a forma correta de fazer isso. O ideal é que você incorpore a tabela dentro dos arquivos do WordPress, e chame o conteúdo DINAMICAMENTE pelas querys do wordpress.

 

Height 100% não funciona na maioria dos casos, por que para funcionar o elemento pai precisa ter um height definido. Não é a mesma lógica do width que o elemento mais ancestral de qualquer elemento já tem um width predefinido por padrão, que é a BODY que tem como width a largura do viewport.

 

Me explica o que você precisa fazer e exibir nessa tabela, que eu te ajudo a fazer inserindo o código da tabela no lugar do iframe e dinamizando o conteúdo pelo próprio wordpress.

Compartilhar este post

Link para o post
Compartilhar em outros sites

evandrosr    0

evandrosr
Postado

É exatamente isso LastK, eu preciso atualizar uma quantidade muito grande de tabelas de vários produtos q gero pelo InDesign... pq esse material também é utilizado para outros fins... Explicando melhor, esse material na realidade é feito para área gráfica e só depois é colocado no site... assim feito as atualizações é só gerar pelo próprio InDesign para evitar ter q fazer todas as mudanças novamente e também evitar possíveis erros.

 

Já que não conseguimos uma solução para a utilização do iframe, fiz conforme vc sugeriu e deu certo, mas o alinhamento do texto ficou no topo... dei uma olhadinha no css e lá diz q o texto está "center"... agora complicou, rs da uma olhadinha no link http://peesa.evandrosr.com.br/?p=1031

 

vc teria uma solução para isso através do css ou o html?

 

html:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>eletronico</title>
<link href="eletronico-web-resources/css/eletronico.css" rel="stylesheet" type="text/css" />
</head>
<body id="eletronico" xml:lang="pt-BR">
<div class="Quadro-de-texto-b-sico">
<table id="table-1" class="Tabela-b-sica">
<colgroup>
<col class="Row-Column-1" />
<col class="Row-Column-2" />
<col class="Row-Column-3" />
<col class="Row-Column-4" />
</colgroup>
<tbody>
<tr class="Row-Column-5">
<td class="cell-style-override-1">
<p class="Par-grafo-b-sico para-style-override-1">Produtos</p>
</td>
<td class="cell-style-override-1">
<p class="Par-grafo-b-sico para-style-override-1">Código</p>
</td>
<td class="cell-style-override-1">
<p class="Par-grafo-b-sico para-style-override-1">Descrição</p>
</td>
<td class="cell-style-override-1">
<p class="Par-grafo-b-sico para-style-override-1">Emb.</p>
</td>
</tr>
<tr class="Row-Column-7">
<td class="cell-style-override-2">
<p class="Par-grafo-b-sico para-style-override-2"><span><img class="frame-6" src="eletronico-web-resources/image/24240.png" alt="24240.png" /></span></p>
</td>
<td class="cell-style-override-2">
<p class="Par-grafo-b-sico para-style-override-2">206</p>
</td>
<td class="cell-style-override-2">
<p class="Par-grafo-b-sico para-style-override-2">Sensor de Presença de Teto - Placa 4x4 Redonda</p>
</td>
<td class="cell-style-override-2">
<p class="Par-grafo-b-sico para-style-override-2">04</p>
</td>
</tr>
<tr class="Row-Column-7">
<td class="cell-style-override-2">
<p class="Par-grafo-b-sico para-style-override-2"><span><img class="frame-8" src="eletronico-web-resources/image/24234.png" alt="24234.png" /></span></p>
</td>
<td class="cell-style-override-2">
<p class="Par-grafo-b-sico para-style-override-2">207</p>
</td>
<td class="cell-style-override-2">
<p class="Par-grafo-b-sico para-style-override-2">Sensor de Presença de Teto - Externo</p>
</td>
<td class="cell-style-override-2">
<p class="Par-grafo-b-sico para-style-override-2">04</p>
</td>
</tr>
<tr class="Row-Column-7">
<td class="cell-style-override-2">
<p class="Par-grafo-b-sico para-style-override-2"><span><img class="frame-8" src="eletronico-web-resources/image/24224.png" alt="24224.png" /></span></p>
</td>
<td class="cell-style-override-2">
<p class="Par-grafo-b-sico para-style-override-2">208</p>
</td>
<td class="cell-style-override-2">
<p class="Par-grafo-b-sico para-style-override-2">Sensor de Presença Articulado</p>
</td>
<td class="cell-style-override-2">
<p class="Par-grafo-b-sico para-style-override-2">04</p>
</td>
</tr>
<tr class="Row-Column-10">
<td class="cell-style-override-2">
<p class="Par-grafo-b-sico para-style-override-2"><span><img class="frame-9" src="eletronico-web-resources/image/24215.png" alt="24215.png" /></span></p>
</td>
<td class="cell-style-override-2">
<p class="Par-grafo-b-sico para-style-override-2">210</p>
</td>
<td class="cell-style-override-2">
<p class="Par-grafo-b-sico para-style-override-2">Rele fotoeletrônico</p>
</td>
<td class="cell-style-override-2">
<p class="Par-grafo-b-sico para-style-override-2">04</p>
</td>
</tr>
</tbody>
</table>
<p class="Par-grafo-b-sico para-style-override-3"></p>
</div>
</body>
</html>
css:
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
margin:0;
padding:0;
border-width:0;
}
td, th {
border-style:solid;
border-width:1px;
border-color: #999 /*cor da borda*/
}
table {
border-collapse:collapse;
}
li {
display:block;
}
body {
font-size:12px;
-epub-hyphens:auto;
}
table.Tabela-b-sica {
border-color:#000000;
border-style:solid;
border-width:1px;
margin-bottom:-4px;
margin-top:4px;
}
p.Par-grafo-b-sico {
-epub-ruby-position:over;
color:#000000;
font-family:"Minion Pro", serif;
font-size:12px;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.2;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
text-align:left;
text-decoration:none;
text-indent:0px;
}
td.cell-style-override-1 {
background-color:#c2c3c9;
padding-bottom:5px;
padding-right:5px;
padding-top:5px;
}
td.cell-style-override-2 {
padding-bottom:6px;
padding-left:3px;
padding-right:6px;
padding-top:6px;
}
p.para-style-override-1 {
color:#ffffff;
font-family:Tahoma, sans-serif;
font-size:13px;
font-style:normal;
font-weight:bold;
text-align:center;
}
p.para-style-override-2 {
font-family:"Zurich Cn BT", sans-serif;
font-size:13px;
font-style:normal;
font-weight:normal;
text-align:center;
}
p.para-style-override-3 {
font-family:"Zurich Cn BT", sans-serif;
font-size:8px;
font-style:normal;
font-weight:normal;
}
col.Row-Column-1 {
width:77px;
}
col.Row-Column-2 {
width:76px;
}
col.Row-Column-3 {
width:558px;
}
col.Row-Column-4 {
width:56px;
}
tr.Row-Column-5 {
min-height:49px;
}
img.frame-6 {
height:60px;
width:60px;
}
tr.Row-Column-7 {
min-height:72px;
}
img.frame-8 {
height:60px;
width:38px;
}
img.frame-9 {
height:43px;
width:60px;
}
tr.Row-Column-10 {
min-height:55px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

PetrusHenrique    5

PetrusHenrique
Postado

No seu arquivo motioncss.css, na linha 813.

caption, td, th, li {
    vertical-align: middle;
}

Eu ainda acho que você está trabalhando errado com essa tabela no wordpress. As informações não estão vindo do wordpress, ou seja, você tá cadastrando manualmente cada produto (pelo que entendi) e isso não é bom pois dá muito trabalho.

Compartilhar este post

Link para o post
Compartilhar em outros sites

evandrosr    0

evandrosr
Postado

LastK, fiz o seguinte:

​

Abri o "editor de HTML Simples" do meu tema WordPress e colei o código .html da tabela... ficou legal, mas só o alinhamento q ficou errado.

 

modelo.jpgmodelo2.jpg

 

 

 

falar nisso, não consegui localizar o arquivo "motioncss.css" para fazer a mudança. não poderia ser feito algo no "eletronico.css"?

 

Qual a outra maneira que você sugere?

Compartilhar este post

Link para o post
Compartilhar em outros sites

PetrusHenrique    5

PetrusHenrique
Postado 
caption, td, th, li {
    vertical-align: middle!important;
}

no seu eletronico.css

 

_______________

 

Tá, mas essas informações que você vai exibir na tabela não vai alterar de acordo com o produto exibido?

Compartilhar este post

Link para o post
Compartilhar em outros sites

evandrosr    0

evandrosr
Postado

LastK, para mim o resultado já está satisfatório com a mudança feita no css que vc passou...

 

Apesar de precisar fazer essa mudança em todo css gerado pelo InDesign o resultado final vai valer a pena pq a tabela se ajusta perfeitamente até msm no celular... vc pode conferir no modelo abaixo como era a tabela anteriormente e a atual

 

modelo3.jpg

 

Agradeço muito pela a sua ajuda!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento com Wordpress
×

Informação importante

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

  Aceito