CSS3 Adjust table to fill blank space generated on Landscape page

Asked

Viewed 509 times

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: inserir a descrição da imagem aqui

Space it should occupy inserir a descrição da imagem aqui

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...

  • didn’t work...

2 answers

1

Your problem is you’re using fixed width in divs where the tables are inside, you have to use values in %

look at the example, there was no margin left!

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;
        width: 25% !important;
        box-sizing: border-box;
    }
<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>

                </table>

                <table class="table">
                    <thead>
                        <tr>
                            <th>Métodos/Processo/Técnica </th>
                        </tr>
                    </thead>
                    <tbody>
         

                </table>

            </div>
            <div  class="relativeEntrada">

                <table class="table">
                    <thead>
                        <tr>
                            <th>Interface Entrada </th>
                        </tr>
                    </thead>
                    <tbody>
        

                </table>
            </div>
            <div class="relativeProcesso">
              <table class="table">
                    <thead>
                        <tr>
                            <th colspan="2">PROCESSO </th>
                        </tr>
                    </thead>
                    <tbody>
                       
                                    <td>@ViewBag.listaProcesso[i].Plano.ToUpper()</td>
                                </tr>
                                <tr>
                                   
                                        <td>@ViewBag.listaProcesso[i].Do_.ToUpper()</td>
                                </tr>
                                <tr>
                                    
                                    <td>@ViewBag.listaProcesso[i].Verifica.ToUpper()</td>
                                </tr>
                                <tr>
                                   
                                    <td>@ViewBag.listaProcesso[i].Acao.ToUpper()</td>
                                </tr>
                                

                    </table>

            </div>
            <div class="relativeSaida">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Interface Saída </th>
                        </tr>
                    </thead>
                    <tbody>
                        
                </table>
            </div>
            <div class="relativeDireita">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Recursos de Pessoal </th>
                        </tr>
                    </thead>
                    <tbody>
                      
                </table>


                <table class="table">
                    <thead>
                        <tr>
                            <th>Medição/Monitoramento </th>
                        </tr>
                    </thead>
                    <tbody>
                       

                </table>

            </div>

inserir a descrição da imagem aqui

  • unfortunately it didn’t work

  • @Daniellearrudatorres I thought your problem was with the horizontal margin rss

1


I understood your problem as if you wanted to leave all tables of the same height, thus hiding all free space,:

height: auto;

for:

min-height: 100%;

Browser other questions tagged

You are not signed in. Login or sign up in order to post.