web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Welcome to the Power Platform Communities
Season of Giving Solutions is Here!
Explore Copilot Studio Forums, Blogs & Galleries!
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / HTML "colspan" or "row...
Power Apps
Answered

HTML "colspan" or "rowspan" Convert to PDF. Here's what worked for me.

(1) ShareShare
ReportReport
Posted on by jerrycrabb 80

Using the OneDrive connector to convert HTML text to PDF, I has having an issue with colspan/rowspan that took me a bit of playing with in order to work. Simple tests would work, and the .html files always looked fine, but when I started to build my actual table, I'd always end up w/ blank PDFs.

 

What I discovered is that the converter requires the table to have at least one row with the actual number of NON-SPANNED columns, as your largest colspan argument. That sounds simple enough, and to be honest I can't really articulate why you wouldn't have at least one row with all the spanned columns...but I guess I'm that guy. 

 

Hopefully the below example helps someone else. Most of the css (table/cell borders, etc.) is added in a separate "compose" in Flow, I didn't include that as it's not critical to the example.

colspan.PNG

"
<!DOCTYPE html>
<html>

<body>

 <table>

 <tr>
 <td colspan='12' > colspan 12 </td>
 </tr>

 <tr>
 <td colspan='6'> colspan 6 </td>
 <td colspan='6'> colspan 6 </td>
 </tr>

 <tr>
 <td colspan='12'> colspan 12 </td>
 </tr>

 <tr>
 <td colspan='12'> colspan 12 </td>
 </tr>

 <tr>
 <td colspan='8'> colspan 8 </td>
 <td colspan='4'> colspan 4 </td>
 </tr>

 <tr>
 <td colspan='9'> colspan 9 </td>
 <td colspan='3'> colspan 3 </td>
 </tr>

 <tr>
 <td colspan='6'> colspan 6 </td>
 <td colspan='6' rowspan='2'> colspan 2<br> rowspan 2 </td>
 </tr>
 <tr>
 <td colspan='6'> colspan 6 </td>
 <td style='border: none; padding:0px'></td>
 </tr>

 <tr>
 <td colspan='4'> colspan 4 </td>
 <td colspan='2'> colspan 2 </td>
 <td colspan='2'> colspan 2 </td>
 <td colspan='4'> colspan 4 </td>
 </tr>
 <tr>
 <td colspan='4'> colspan 4 </td>
 <td colspan='2'> colspan 2 </td>
 <td colspan='2'> colspan 2 </td>
 <td colspan='4'> colspan 4 </td>
 </tr>
 <tr>
 <td colspan='4'> colspan 4 </td>
 <td colspan='2'> colspan 2 </td>
 <td colspan='2'> colspan 2 </td>
 <td colspan='4'> colspan 4 </td>
 </tr>
 <tr>
 <td colspan='4'> colspan 4 </td>
 <td colspan='2'> colspan 2 </td>
 <td colspan='2'> colspan 2 </td>
 <td colspan='4'> colspan 4 </td>
 </tr>
 <tr>
 <td colspan='4'> colspan 4 </td>
 <td colspan='2'> colspan 2 </td>
 <td colspan='2'> colspan 2 </td>
 <td colspan='4'> colspan 4 </td>
 </tr>
 <tr>
 <td colspan='4'> colspan 4 </td>
 <td colspan='2'> colspan 2 </td>
 <td colspan='2'> colspan 2 </td>
 <td colspan='4'> colspan 4 </td>
 </tr>
 <tr>
 <td colspan='4'> colspan 4 </td>
 <td colspan='8'> colspan 8 </td>
 </tr>
 <tr>
 <td colspan='4'> colspan 4 </td>
 <td colspan='8'> colspan 8 </td>
 </tr>
 <tr>
 <td colspan='4'> colspan 4 </td>
 <td colspan='8'> colspan 8 </td>
 </tr>
 <tr>
 <td colspan='6'> colspan 6 </td>
 <td colspan='6'> colspan 6 </td>
 </tr>
 <tr>
 <td colspan='12'> colspan 12 </td>
 </tr>
 
 <tr>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 </tr>
 

 </table>
 <table style='border: none; padding:0px;'>

 <tr>
 <td colspan='4' style='border: none; padding:0px; text-align: left;'><b>DD FORM ##, MMM YYYY</b></td>
 <td colspan='5' style='border: none; padding:0px;'>PREVIOUS EDITION IS OBSOLETE</td>
 <td colspan='3' style='border: none; padding:0px;'></td>
 </tr>

 <tr>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 <td style='width:10%; border:none; padding:0px'> </td>
 </tr>
 </table>

</body>

</html>"

 

Categories:
Building Power Apps
I have the same question (0)
  • Verified answer
    v-jefferni Profile Picture
    v-jefferni on at

    Hi @jerrycrabb ,

     

    Thanks for your sharing. I believe this would be very helpful for other users.

     

    Best regards,

  • davidpiedra Profile Picture
    davidpiedra 9 on at

    I've been dealing with this for over a day, tried a lot of different "solutions" and this was the only one that works. Thanks for posting.

  • jerrycrabb Profile Picture
    jerrycrabb 80 on at

    Yay!

  • shweta1223 Profile Picture
    shweta1223 14 on at

    Hi @jerrycrabb

     

    I am still facing this issue even after adding a dummy tr row in the table html I am creating. Does the sequence of the row matters?

    Also, I am working with nested tables, I tried adding this in every table created via my html. Unfortunately this isn't working for me. 

  • jerrycrabb Profile Picture
    jerrycrabb 80 on at

    unfortunately I don't have any experience trying to do this w/ nested tables.  Since posting this I've often wondered if just having a table head element w/ the maximum number of columns would be all that is needed. In other words, for a table that was spanning a max of 8 columns:

    <thead style='height:0px;'>
 <tr>
 <th></th>
 <th></th>
 <th></th>
 <th></th>
 <th></th>
 <th></th>
 <th></th>
 <th></th>
 </tr>
</thead>

     

  • shweta1223 Profile Picture
    shweta1223 14 on at

    @jerrycrabb Thanks for replying. I'll be trying adding this in <thead> as well. Just wanted to know, what makes you add only 8 <th> as supposed to 12 which is followed in the grid system?

  • jerrycrabb Profile Picture
    jerrycrabb 80 on at

    Sorry, I didn't mean to confuse you by changing it to 8.  If you're spanning a maximum of 12 columns then you would probably need 12 <th> </th>.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities
Season of Giving Solutions is Here!
Explore Copilot Studio Forums, Blogs & Galleries!

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Congratulations to the November Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 711 Most Valuable Professional

#2
Michael E. Gernaey Profile Picture

Michael E. Gernaey 319 Super User 2025 Season 2

#3
Power Platform 1919 Profile Picture

Power Platform 1919 268

Last 30 days Overall leaderboard

Featured topics

Auto-Populate field Power Pages
Gallery Tabs - Show or Hide Tabs based on Field Value
How to patch multiple records at once
Enable Copilot for end users in model-driven apps
Question for everyone : How are you using Create Text GPT in AI Builder?
Community content - sample components, blogs etc. - Link to this page (http://aka.ms/PCFdemos)
Welcome to the Power Apps forum!

Product updates

Microsoft Power Platform Community release plans