2
I have a report that is mounting in css and occupies A4 landscape size and I would like the tables to fit to always occupy all the space of the page.
Image as ta:
Space it should occupy
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;
}
.header {
padding-top: 10px;
text-align: center;
border: 1px solid #ddd;
}
#cabecalhoRel {
font-family: Arial, Verdana, Tahoma, Sans-Serif;
color: #333333;
font-size: 9px;
}
table {
width: 100%;
font-size: 80%;
}
table th {
background-color: dimgray;
color: white;
text-align: center;
font-family: Arial, Verdana, Tahoma, Sans-Serif;
color: #333333;
font-size: 12px;
}
th,
td {
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: 200px;
height: auto;
border: solid #000000 1px;
}
.relativeEntrada {
position: relative;
width: 200px;
height: auto;
border: solid #000000 1px;
}
.relativeProcesso {
position: relative;
/* left: 300px; */
width: 431px;
height: auto;
border: solid #000000 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:
<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">
<br>
</div>
<h3>[DIAGRAMA DE PROCESSO] - [QUALIDADE]</h3>
<br />
</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>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>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>
</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><center><b>P<br />(Plan)</b></center></td>
}
<td>@ViewBag.listaProcesso[i].Plano.ToUpper()</td>
</tr>
<tr>
@if (i == 0)
{
<td><center><b>D<br />(do)</b></center></td>
}
<td>@ViewBag.listaProcesso[i].Do_.ToUpper()</td>
</tr>
<tr>
@if (i == 0)
{
<td><center><b>C<br />(Check)</b></center></td>
}
<td>@ViewBag.listaProcesso[i].Verifica.ToUpper()</td>
</tr>
<tr>
@if (i == 0)
{
<td><center><b>A<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>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>
</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>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>
To think that this is the margin of the page... try @page { margin:0} and test to see what it picks up...
– hugocsl
didn’t work...
– Danielle Arruda torres