Table with images gets cut

[baneageorge]

Hi guys, thx very much for this amazing plugin, by far one of the best I tried!

I run into some issues which I hope you can help with. I often put pictures inside tables to have a side by side view and to auto-size the pictures between mobile and desktop. I think what happens is that pictures get in the full resolution which ends up cutting the table and misses content.

On mkdocs website - All OK

On PDF output - Only part of the table

The markup

## **Install display on your handlebar**

| Measure handlebar | Tighten the screw | Allow slight rotation | Plug-in the connector |
|:-:|:-:|:-:|:-:|
| ![Handlebar measurement][HandlebarMeasurement] | ![EggRider hero][DisplayScrewThightening] | ![Allow slight rotation][DisplaySlightRotation] | ![Plug-in connector][PlugConnectors] |

The HTML

<h2 id="install-display-on-your-handlebar"><strong>Install display on your handlebar</strong><a class="headerlink" href="#install-display-on-your-handlebar" title="Permanent link">Link</a></h2>
<div class="md-typeset__scrollwrap"><div class="md-typeset__table"><table> <thead> <tr> <th align="center">Measure handlebar</th> <th align="center">Tighten the screw</th> <th align="center">Allow slight rotation</th> <th align="center">Plug-in the connector</th> </tr> </thead> <tbody> <tr> <td align="center"><img alt="Handlebar measurement" src="../assets/images/display_instructions/handlebar_measurement.jpg" title="Handlebar measurement"></td> <td align="center"><img alt="EggRider hero" src="../assets/images/display_instructions/eggrider_screw_tightening.jpg" title="EggRider screw thightening"></td> <td align="center"><img alt="Allow slight rotation" src="../assets/images/display_instructions/eggrider_allow_slight_rotation2.jpg" title="EggRider allow slight rotation"></td> <td align="center"><img alt="Plug-in connector" src="../assets/images/display_instructions/plug_connectors.jpg" title="Plug connectors"></td> </tr> </tbody> </table></div></div>

PS: I tried the suggestions in #23 but no success :(

I would really appreciate your help! Keep up with the good work!

[orzih]

Hi @baneageorge.

You can try use Attribute List extention.

e.g.

1. Configuration in your mkdocs.yml.

   markdown_extensions:
       - attr_list

2. Add css class to td.

   | Hdr1 | Hdr2 | Hdr3 | Hdr4 |
   |:-:|:-:|:-:|:-:|
   | ![img1][img1] { .p-w25 } | ![img2][img2] { .p-w25 } | ![img3][img3] { .p-w25 } | ![img4][img4] { .p-w25 } |

3. Add style in your custom css file.

   @media print {
     .md-typeset table:not([class]) {
       width: 98%;
       table-layout: fixed
     }
     .md-typeset table:not([class]) td.p-w25 {
       width: 25%;
       padding: 0.5mm;
     }
   }

[baneageorge]

Hi,

Thank you so so so much!!!!

Obviously, I didn't have any clue about such tricks. Unfortunately, following your example, I couldn't make it work. I am not that great at CSS but after some experimentation I kind of make it work with the CSS below by forcing the pixel sizes.

@media print {
  .md-typeset table:not([class]) {
    width: 680px;
    table-layout: fixed
  }
  .md-typeset table:not([class]) td.p-w2x {
    width: 340px;
    padding: 0.5mm;
  }
  .md-typeset table:not([class]) td.p-w3x {
    width: 226px;
    padding: 0.5mm;
  }
  .md-typeset table:not([class]) td.p-w4x {
    width: 170px;
    padding: 0.5mm;
  }
  .md-typeset table:not([class]) td.p-w5x {
    width: 136px;
    padding: 0.5mm;
  }

  .md-typeset table:not([class]) td img {
    width: 100%;
  }

  .md-typeset img {
    max-height: 400px;
  }
}

The only issue remaining now is that if images have different height the table somehow becomes smaller than the width of the page.

From HTML website:

From PDF manual:

[orzih]

It is better not to specify with px in printing.

The default size of this plugin is "A4(210×297 mm)": https://github.com/orzih/mkdocs-with-pdf/blob/03616f6e9c8e9bb11df7274058479f0cc9d9101f/mkdocs_with_pdf/styles/_paging.scss#L1-L3

You can try to use real measurement units like mm, in or ..., e.g.

@media print {
  .md-typeset table:not([class]) {
    width: 190mm; /* or 7.5in */
    table-layout: fixed
  }
  ...
}

[baneageorge]

Hi,

Disregard my previous complain about the table not fitting the entire width... it was just my stupid mistake... I had a typo in the class of the md file.

I still didn't manage to make it work with % but I did change them now as you suggested from px to mm and it all works nicely. (as it was with px too) Sometimes I had to go lower than the 190/number of columns but that's all!

Thank you very much for your help! I think it will be useful to have such an example for noobs like me on the readme page.

Best regards, George

PS: Please let me know how I can offer you a beer/coffee or such!