A
A
alex995052020-02-24 07:18:43
Yii
alex99505, 2020-02-24 07:18:43

How to split a sheet into 4 equal rectangles in mpdf with a picture and texts inside?

I use the extension https://github.com/kartik-v/yii2-mpdf
I can't split the page into 4 equal rectangles with content inside (text+image).
Tried using a table with "table-layout: fixed" style properties
AND hardwiring the width and height of the td tag - didn't work... It just doesn't adhere to those settings.

UPD:
Went to create from scratch.
While such html, everything is beautiful:

<div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;width: 793px; height: 1122px;">
  <table style="width:100%;table-layout: fixed">
    <tr>
      <td width="396px" height="500px"
          style="border-right:1px dashed black;border-bottom:1px dashed black;vertical-align:center;">
        <table style="width:100%;">
          <tr>
            <td>
              <p style="color:#009acf;font-size:27px;font-weight:bold;">sadsaa</p>
              <hr style="width:100%;color:#d6d6d6;"/>
              <hr style="width:100%;color:#d6d6d6;"/>
            </td>
          </tr>
        </table>

      </td>
      <td width="396px" height="561px"
          style="vertical-align:center;border-bottom:1px dashed black;">
        N2
      </td>
    </tr>
    <tr>
      <td width="396px" height="561px"
          style="border-right:1px dashed black;vertical-align:center;">
        N3
      </td>
      <td width="396px" height="561px"
          style="vertical-align:center;">
        N4
      </td>
    </tr>
  </table>
</div>


But as soon as one more row is added to the table, the right area becomes smaller than the specified size:
<div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;width: 793px; height: 1122px;">
  <table style="width:100%;table-layout: fixed">
    <tr>
      <td width="396px" height="500px"
          style="border-right:1px dashed black;border-bottom:1px dashed black;vertical-align:center;">
        <table style="width:100%;">
          <tr>
            <td>
              <p style="color:#009acf;font-size:27px;font-weight:bold;">sadsaa</p>
              <hr style="width:100%;color:#d6d6d6;"/>
              <hr style="width:100%;color:#d6d6d6;"/>
            </td>
          </tr>
        </table>

      </td>
      <td width="396px" height="561px"
          style="vertical-align:center;border-bottom:1px dashed black;">
        N2
      </td>
    </tr>

    <tr>
      <td width="396px" height="61px" style="vertical-align:bottom;border-bottom:1px dashed black;border-right:1px dashed black;">
        <hr style="width:100%;color:#d6d6d6;margin-top:0px;"/>
        <table style="width:100%">
          <tr>
            <td style="vertical-align:top;">
              <span style="text-align:right;font-size:20px;"><i>sada</i></span>
            </td>
            <td style="vertical-align:top;text-align:center;">
              <div style="font-size:20px;"><img alt="" src="images/border-radius.png"/></div>
            </td>
            <td  style="vertical-align:top;">
              <span style="text-align:left;font-size:20px;"><i>asdsa</i></span>
            </td>
          </tr>
        </table>
      </td>
      <td width="396px" height="61px" style="vertical-align:bottom;text-align:center;border-bottom:1px dashed black;">
        <img src="images/border-radius.png"/>
      </td>
    </tr>
    <tr>
      <td width="396px" height="561px"
          style="border-right:1px dashed black;vertical-align:center;">
        N3
      </td>
      <td width="396px" height="561px"
          style="vertical-align:center;">
        N4
      </td>
    </tr>
  </table>
</div>

Что в том коде не так?)

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question