I cannot configure PDF using Page Print

Question

I'm creating a report using html and CSS. I'm not able to make the PDF view equal to the html in an expressed way.

My page looked like this:

![enter image description here][1]

In PDF it didn't look like HTML:

I tried:

<style>
      page {
        background: white;
        display: block;
        margin: 0 auto;
        margin-bottom: 0.5cm;
        box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
    }

        page[size="A4"] {
            width: 12cm;
            height: 100%;
        }

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

   
</style>

---

HTML:

<page size="A4">
    <div class="container body-content">
       <table class="table table-bordered table-condensed" style="margin-top: -22px">
           <tbody>
                <tr style="">
                   <td style="border: 1px solid #ffffff !important; padding-top: 13px;">
                        <div class="row">
                             <div class="col col-xs-6" style="margin-top: 14px;margin-bottom:1%; padding-right: 0px;">
                                <div class="col-md-12">
                                   <img class="pull-right border-solid-1 img-prod" src="@itens.xFileImagePrincipal" alt="">
                               </div>
                               </div>
                               <div class="col col-xs-5 col-md-2" style="padding-left: 0px; ">
                                   <div class="col-md-12 border-solid-1" style="padding-left: 20px; min-height: 200px !important; margin-top: 14px !important;">
                                                            @*TODO: Modelo*@
                                                            <div class="row p-t-10">
                                                                <h6><strong>Cód.:</strong> <strong style="font-size: 17px !important;">@itens.xCodAlternativo</strong></h6>
                                                            </div>

                                                            <div class="row margem p-r-10">
                                                                <h6><strong>Descrição: &nbsp;@itens.xDetalhes</strong></h6>
                                                            </div>

                                                            <div class="row produto p-t-5">

                                                            {
                                                                <div class="row" style="padding-top: 10px;">
                                                                    <strong class="color-red">Preço:&nbsp; R$ @itens.vlrTabela1Formatado / @itens.xUnidadeMedida</strong>
                                                                </div>
                                                            }

                                                            @if (!string.IsNullOrEmpty(itens.xTabela2))
                                                            {
                                                                <div class="row" style="padding-top: 10px;">
                                                                    <strong class="color-red">Preço:&nbsp; R$ @itens.vlrTabela2Formatado / @itens.xUnidadeMedida</strong>
                                                                </div>
                                                            }

                                                            @if (!string.IsNullOrEmpty(itens.xTabela3))
                                                            {
                                                                <div class="row" style="padding-top: 10px;">
                                                                    <strong class="color-red">Preço:&nbsp; R$ @itens.vlrTabela3Formatado / @itens.xUnidadeMedida</strong>
                                                                </div>
                                                            }

                                                            @if (!string.IsNullOrEmpty(itens.xTabela4))
                                                            {
                                                                <div class="row" style="padding-top: 10px;">
                                                                    <strong class="color-red">Preço:&nbsp; R$ @itens.vlrTabela4Formatado / @itens.xUnidadeMedida</strong>
                                                                </div>
                                                            }
                                                            @if (!string.IsNullOrEmpty(itens.xTabela5))
                                                            {
                                                                <div class="row" style="padding-top: 10px;">
                                                                    <strong class="color-red">Preço:&nbsp; R$ @itens.vlrTabela5Formatado / @itens.xUnidadeMedida</strong>
                                                                </div>
                                                            }
                                                            @if (!string.IsNullOrEmpty(itens.xTabela6))
                                                            {
                                                                <div class="row" style="padding-top: 10px;">
                                                                    <strong class="color-red">Preço:&nbsp; R$ @itens.vlrTabela6Formatado / @itens.xUnidadeMedida</strong>
                                                                </div>
                                                            }
                                                            @if (!string.IsNullOrEmpty(itens.xTabela7))
                                                            {
                                                                <div class="row" style="padding-top: 10px;">
                                                                    <strong class="color-red">Preço:&nbsp; R$ @itens.vlrTabela7Formatado / @itens.xUnidadeMedida</strong>
                                                                </div>
                                                            }
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
</div>

I've tried everything and researched a lot about it, but I didn't get any results. Final result:

Answer 1

An A4 page is 21cm (210mm) wide, which is hard-coded to be that wide in portrait.
The page should not be assigned as size A4 when you don't need it:

page {
  width: 12cm;
  // ...
}

So, removing [size="A4"].

Reference: CSS page size at MDN