Setting Layou CSS and HTML

1

I could not get the table " Input Interface and Output Interface " on the sides of the Another question is to sort the entries and exits of each " Plan / Do / Check / Action ", they would have to stay in the same line as in the image below.   

WhatIgotUsingCSSandHTML,listingFromthedatabasefields:

Css:

<style>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;
        background: rgb(204, 204, 204);
    }
}

.logo {
    float:left;
}

.corpo {
    border: 2px solid #ddd;
    height: auto;
    display: inline-block;
    margin: 0;
    width: -webkit-fill-available;
}
.header {
    padding-top: 10px;
    text-align: center;
    border: 2px solid #ddd;

}
.revisao {
    text-align: left;
    font-family: Arial, Verdana, Tahoma, Sans-Serif;
    color: #333333;
    font-size: 11px;
    position: relative;
    /* left: 300px; */
    float: right;
    width: auto;
    height: auto;
    border: solid #ddd 2px;
}
#cabecalhoRel {
    font-family: Arial, Verdana, Tahoma, Sans-Serif;
    color: #333333;
    font-size: 9px;
}
table {
    /*border-collapse: collapse;*/
    width: 100%;
    font-size: 80%;
}

table th {
    background-color: antiquewhite;
    color: white;
    text-align: left;
    font-family: Arial, Verdana, Tahoma, Sans-Serif;
    color: #333333;
    font-size: 12px;
}

th,
td {
    /* Tirar o comentário do border , que no imprimir aparece como jeferson gostou*/
    border: 1px solid #ddd;
    text-align: left;
    font-family: Arial, Verdana, Tahoma, Sans-Serif;
    color: #333333;
    font-size: 9px;
}

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

/* para definir a impressão no modo paisagem */
@page {
    size: landscape
}
/*fim do modo de paisagem*/

.relativeEsquerda {
    position: relative;
    width: 180px;
    height: auto;
    /*border: solid #000000 1px;*/
}
.relativeEntrada {
    position: relative;
    width: 150px;
    height: auto;
    /*border: solid #000000 1px;*/

}
.relativeProcesso {
    position: relative;
    /* left: 300px; */
    width: 300px;
    height: auto;
    border: solid #ddd 1px;
}
.relativeSaida {
    position: relative;
    width: 200px;
    height: auto;
    /*border: solid #000000 1px;*/
}
.relativeDireita {
    position: relative;
    /* left: 600px; */
    width: 200px;
    height: auto;
    /*border: solid #000000 1px;*/
}

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

</style >

HTML :

@{
    Layout = null;
    var cont = 0;
    string setor = "";
}
<html>
<head>
    <link href="~/Areas/Qualidade/Css/RelatorioPaisagem.css" rel="stylesheet" />
    @*<link href="~/Areas/Qualidade/Css/RelatorioRetrato.css" rel="stylesheet" />*@

</head>
<body>
    <div class="a4_vertical">
        <page size="A4">

            <div class="header">
                <img src="~/imagem/logo.png" class="logo" />
                <div id="cabecalhoRel">

                  MINHA EMPRESA
                    <br>
                    MEU ENDEREÇO
                    <br>MEU CNPJ E TELEFONE

                    <br>
                </div>
                <div class="revisao">
                    @{ for (int i = 0; i < ViewBag.listaProcesso.Count; i++)

                        {
                            if (i == 0)
                            {
                                <b>Processo:</b> @ViewBag.listaProcesso[i].Numero_Processo
                                <br />
                                <b>Revisão:</b> @ViewBag.listaProcesso[i].Numero_Revisao
                                <br />
                                <b>Data Criação:</b> @ViewBag.listaProcesso[i].Data_Criacao.ToString("dd'/'MM'/'yyyy HH:mm:ss")
                                <br />
                                <b>Usuário:</b> @ViewBag.listaProcesso[i].Nome_Usuario.ToUpper()
                                setor = ViewBag.listaProcesso[i].Setor.ToUpper();
                            }
                            cont++;
                        }
                    }
                </div>

                <h4>DIAGRAMA DE PROCESSO -  @setor</h4>
                <br />


            </div>
            <div class="corpo">
            <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>
                <br />
                <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="relativeEntrada">

                <table class="table">
                    <thead>
                        <tr>
                            <th colspan="2">Entrada </th>

                        </tr>
                    </thead>
                    <tbody>
                        @{ for (int i = 0; i < ViewBag.listaEntrada.Count; i++)
                            {
                        <tr>
                            <td>@ViewBag.listaEntrada[i].Titulo</td>
                            <td>@ViewBag.listaEntrada[i].Descricao</td>
                        </tr>
                                cont++;
                            }
                        }

                </table>
            </div>
            <div class="relativeProcesso">
              <table class="table">
                    <thead>
                        <tr>
                            <th colspan="2"><center>PROCESSO</center> </th>
                        </tr>
                    </thead>
                    <tbody>
                        @{ for (int i = 0; i < ViewBag.listaProcesso.Count; i++)
                            {

                        <tr>
                            <td>@ViewBag.listaProcesso[i].Acao</td>
                            <td>@ViewBag.listaProcesso[i].Titulo</td>
                            @*<td>@ViewBag.listaProcesso[i].Descricao</td>*@
                        </tr>
                                @*<tr>
                    @if(i == 0) {
                         <td><center><font size="12"><b>P</b></font><br />(Plan)</center></td>
                    }
                    <td>@ViewBag.listaProcesso[i].Titulo.ToUpper()</td>
                </tr>
                <tr>
                    @if (i == 0)
                    {
                    <td><center><b><font size="14">D</font><br />(Do)</b></center></td>
                                        }
                        <td>@ViewBag.listaProcesso[i].Do_.ToUpper()</td>
                </tr>
                <tr>
                    @if (i == 0)
                    {
                    <td><center><b><font size="14">C</font><br />(Check)</b></center></td>
                    }
                    <td>@ViewBag.listaProcesso[i].Verifica.ToUpper()</td>
                </tr>
                <tr>
                    @if (i == 0)
                    {
                    <td><center><b><font size="14">A</font><br />(Action)</b></center></td>
                    }
                    <td>@ViewBag.listaProcesso[i].Acao.ToUpper()</td>
                </tr>*@
                                cont++;
                            }
                        }

</table>

            </div>
            <div class="relativeSaida">
                <table class="table">
                    <thead>
                        <tr>
                            <th colspan="2">Saída </th>
                        </tr>
                    </thead>
                    <tbody>
                        @{ for (int i = 0; i < ViewBag.listaSaida.Count; i++)
                            {
                        <tr>
                            <td>@ViewBag.listaSaida[i].Titulo</td>
                            <td>@ViewBag.listaSaida[i].Descricao</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>

                <br />
                <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>
            </div>


        </page>

        <page size="A4"></page>
        </div>
</body>
</html>
    
asked by anonymous 04.07.2018 / 14:03

0 answers