@alex99505

Как в mpdf разбить лист на 4 равных прямоугольника с картинкой и текстов внутри?

Использую расширение https://github.com/kartik-v/yii2-mpdf
Не получается разбить страницу на 4 равноценных прямоугольника с контентом внутри (текст+картинка).
Пробовал использовать таблицу со свойствами стиля "table-layout: fixed"
И жестко задать ширину и высоту тегу td - не помогло... Оно просто не придерживается этих настроек.

UPD:
Пошел создавать с нуля.
Пока такой html, все красиво:
<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>


Но как только добавляется еще одна строка в таблице, то правая область стает меньше заданного размера:
<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>

Что в том коде не так?)
  • Вопрос задан
  • 88 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы