2

Possuo um relatório que é montado em html e css no tamanho da folha A4 no formato paisagem. Tudo funciona perfeito. No entanto não consigo alinhar as tabelas uma do lado da outra. Quero Alinhar todas as tabelas (divs) abaixo uma do lado da outra:inserir a descrição da imagem aqui

CSS:

 body {
        background: rgb(204, 204, 204);
    }

page {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

    page[size="A4"] {
        width: 21cm;
        height: 29.7cm;
    }

        page[size="A4"][layout="portrait"] {
            width: 29.7cm;
            height: 21cm;
        }

@media print {
    body,
    page {
        margin: 0;
        box-shadow: 0;
    }
}

.header {
    padding-top: 10px;
    text-align: center;
    border: 2px solid #ddd;
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 80%;
}

    table th {
        background-color: #4caf50;
        color: white;
        text-align: center;
    }

th,
td {
    border: 1px solid #ddd;
    text-align: left;
}

tr:nth-child(even) {
    background-color: #f2f2f2
}

/* para definir a impressão no modo paisagem */
@page {
    size: landscape
}
.relativeEsquerda {
    position: relative;
    width: 200px;
    height: auto;
    border: solid #6AC5AC 3px;
}

.relativeProcesso {
    position: relative;
    left: 300px;
    width: 600px;
    height: auto;
    border: solid #6AC5AC 3px;
}

.relativeDireita {
    position: relative;
    left: 600px;
    width: 200px;
    height: auto;
    border: solid #6AC5AC 3px;
}

HTML:

<html>
<head>
    <link href="~/Areas/Qualidade/Css/RelatorioPaisagem.css" rel="stylesheet" />
</head>
<body>
    <div class="a4_vertical">
        <page size="A4">
            <img src="~/imagem/logo.png" />
            <div class="header">

                <h3>[DIAGRAMA DE PROCESSO] -  [QUALIDADE]</h3>
            </div>

            <div class="relativeEsquerda">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Recursos de Materiais </th>
                        </tr>
                    </thead>
                    <tbody>
                        @{ for (int i = 0; i < ViewBag.listaMaterial.Count; i++)
                            {
                                <tr>
                                    <td>@ViewBag.listaMaterial[i].Descricao</td>
                                </tr>
                                cont++;
                            }
                        }

                </table>

                <table class="table">
                    <thead>
                        <tr>
                            <th>Interface Entrada </th>
                        </tr>
                    </thead>
                    <tbody>
                        @{ for (int i = 0; i < ViewBag.listaEntrada.Count; i++)
                            {
                                <tr>
                                    <td>@ViewBag.listaEntrada[i].Descricao</td>
                                </tr>
                                cont++;
                            }
                        }

                </table>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Métodos/Processo/Técnica </th>
                        </tr>
                    </thead>
                    <tbody>
                        @{ for (int i = 0; i < ViewBag.listaMetodo.Count; i++)
                            {
                                <tr>
                                    <td>@ViewBag.listaMetodo[i].Descricao</td>
                                </tr>
                                cont++;
                            }
                        }

                </table>

            </div>

            <div class="relativeProcesso">
              <table class="table">
                    <thead>
                        <tr>
                            <th colspan="2">PROCESSO </th>
                        </tr>
                    </thead>
                    <tbody>
                        @{ for (int i = 0; i < ViewBag.listaProcesso.Count; i++)
                            {
                                <tr>
                                    @if(i == 0) {
                                         <td>P(Plan)</td>
                                    }
                                    <td>@ViewBag.listaProcesso[i].Plano</td>
                                </tr>
                                <tr>
                                    @if (i == 0)
                                    {
                                        <td>D(do)</td>
                                    }
                                    <td>@ViewBag.listaProcesso[i].Do_</td>
                                </tr>
                                <tr>
                                    @if (i == 0)
                                    {
                                        <td>C(Check)</td>
                                    }
                                    <td>@ViewBag.listaProcesso[i].Verifica</td>
                                </tr>
                                <tr>
                                    @if (i == 0)
                                    {
                                        <td>A(Action)</td>
                                    }
                                    <td>@ViewBag.listaProcesso[i].Acao</td>
                                </tr>
                                cont++;
                            }
                        }

</table>

            </div>
            <div class="relativeDireita">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Recursos de Pessoal </th>
                        </tr>
                    </thead>
                    <tbody>
                        @{ for (int i = 0; i < ViewBag.listaRecursoPessoal.Count; i++)
                            {
                                <tr>
                                    <td>@ViewBag.listaRecursoPessoal[i].Descricao</td>
                                </tr>
                                cont++;
                            }
                        }

                </table>

                <table class="table">
                    <thead>
                        <tr>
                            <th>Interface Saída </th>
                        </tr>
                    </thead>
                    <tbody>
                        @{ for (int i = 0; i < ViewBag.listaSaida.Count; i++)
                            {
                                <tr>
                                    <td>@ViewBag.listaSaida[i].Descricao</td>
                                </tr>
                                cont++;
                            }
                        }

                </table>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Medição/Monitoramento </th>
                        </tr>
                    </thead>
                    <tbody>
                        @{ for (int i = 0; i < ViewBag.listaMedicao.Count; i++)
                            {
                                <tr>
                                    <td>@ViewBag.listaMedicao[i].Descricao</td>
                                </tr>
                                cont++;
                            }
                        }

                </table>



            </div>


        </page>

        <page size="A4"></page>
        </div>
</body>
</html>
3
  • Já tentou com float: left?
    – Sam
    Commented 13/06/2018 às 19:02
  • como ficaria? colocaria em todos os .relative? Commented 13/06/2018 às 19:07
  • parece que sim, se essas forem as divs principais da tabela.
    – Sam
    Commented 13/06/2018 às 19:08

1 Resposta 1

1

Vc pode colocar display:inline-block nas div e vc tem que tirar esses left:300px / 600px

Com essa regra vc pega todas as divs que começam com "rela" e coloca o display para ficarem em linha

[class^="rela"] { display: inline-block; }

Veja abaixo o código corrigido:

 body {
        background: rgb(204, 204, 204);
    }

page {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

    page[size="A4"] {
        width: 21cm;
        height: 29.7cm;
    }

        page[size="A4"][layout="portrait"] {
            width: 29.7cm;
            height: 21cm;
        }

@media print {
    body,
    page {
        margin: 0;
        box-shadow: 0;
    }
}

.header {
    padding-top: 10px;
    text-align: center;
    border: 2px solid #ddd;
}

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 80%;
}

    table th {
        background-color: #4caf50;
        color: white;
        text-align: center;
    }

th,
td {
    border: 1px solid #ddd;
    text-align: left;
}

tr:nth-child(even) {
    background-color: #f2f2f2
}

/* para definir a impressão no modo paisagem */
@page {
    size: landscape
}
.relativeEsquerda {
    position: relative;
    width: 200px;
    height: auto;
    border: solid #6AC5AC 3px;
}

.relativeProcesso {
    position: relative;
    /* left: 300px; */
    width: 600px;
    height: auto;
    border: solid #6AC5AC 3px;
}

.relativeDireita {
    position: relative;
    /* left: 600px; */
    width: 200px;
    height: auto;
    border: solid #6AC5AC 3px;
}

[class^="rela"] {
    display: inline-block;
    float: left;
}
<div class="a4_vertical">
        <page size="A4">
            <img src="~/imagem/logo.png" />
            <div class="header">

                <h3>[DIAGRAMA DE PROCESSO] -  [QUALIDADE]</h3>
            </div>

            <div class="relativeEsquerda">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Recursos de Materiais </th>
                        </tr>
                    </thead>
                    <tbody>
                       
                                <tr>
                                    <td>@ViewBag.listaMaterial[i].Descricao</td>
                                </tr>
               
                </table>

                <table class="table">
                    <thead>
                        <tr>
                            <th>Interface Entrada </th>
                        </tr>
                    </thead>
                    <tbody>
                        
                                <tr>
                                    <td>@ViewBag.listaEntrada[i].Descricao</td>
                                </tr>
                           

                </table>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Métodos/Processo/Técnica </th>
                        </tr>
                    </thead>
                    <tbody>
                       
                                <tr>
                                    <td>@ViewBag.listaMetodo[i].Descricao</td>
                                </tr>
                               

                </table>

            </div>

            <div class="relativeProcesso">
              <table class="table">
                    <thead>
                        <tr>
                            <th colspan="2">PROCESSO </th>
                        </tr>
                    </thead>
                    <tbody>
                        
                                <tr>
                                   
                                         <td>P(Plan)</td>
                                    
                                    <td>@ViewBag.listaProcesso[i].Plano</td>
                                </tr>
                                <tr>
                                   
                                        <td>D(do)</td>
                                    
                                    <td>@ViewBag.listaProcesso[i].Do_</td>
                                </tr>
                                <tr>
                                   
                                        <td>C(Check)</td>
                                    
                                    <td>@ViewBag.listaProcesso[i].Verifica</td>
                                </tr>
                                <tr>
                                   
                                        <td>A(Action)</td>
                                    
                                    <td>@ViewBag.listaProcesso[i].Acao</td>
                                </tr>
                       

</table>

            </div>
            <div class="relativeDireita">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Recursos de Pessoal </th>
                        </tr>
                    </thead>
                    <tbody>
                       
                                <tr>
                                    <td>@ViewBag.listaRecursoPessoal[i].Descricao</td>
                                </tr>
                               

                </table>

                <table class="table">
                    <thead>
                        <tr>
                            <th>Interface Saída </th>
                        </tr>
                    </thead>
                    <tbody>
                       
                                <tr>
                                    <td>@ViewBag.listaSaida[i].Descricao</td>
                                </tr>
                                

                </table>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Medição/Monitoramento </th>
                        </tr>
                    </thead>
                    <tbody>
                       
                                <tr>
                                    <td>@ViewBag.listaMedicao[i].Descricao</td>
                                </tr>
                                

                </table>



            </div>


        </page>

        <page size="A4"></page>
        </div>

inserir a descrição da imagem aqui

4
  • Vou testar ... Obrigada Commented 13/06/2018 às 19:22
  • @DanielleArrudatorres aqui testando no Chrome deu certo, mas testa ai para ver se não tem nenhum detalhe pra arrumar
    – hugocsl
    Commented 13/06/2018 às 19:24
  • Certinho... Obrigada. Agora vou ajustar layout pra ficar bonitinho. colocar logo, mudar cor... etc.. Commented 13/06/2018 às 19:33
  • @DanielleArrudatorres isso ai, faz a "arte final" agora pra ficar legal, qq outra dúvida posta ai que sempre tem alguém pra ajudar []´s
    – hugocsl
    Commented 13/06/2018 às 19:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .