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

Announcements

Welcome to the Power Platform Communities
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / How to remove extra sp...
Power Apps
Unanswered

How to remove extra space in table

(0) ShareShare
ReportReport
Posted on by lunalovegood 215

Hello,
This is my table that i created using HtmlText element :

lunalovegood_0-1696920927623.png

As you can see above , there's white space and the row doesnt fit to the text, how do i make my row fit the content?
this is my html code:

"<!DOCTYPE html>
<html>
<head>
<title>Checklist Interface</title>
</head>
<body>
<h1 style='font-size: 15px;text-align: center; font-weight:semibold;'>Lesson Learned Checklist Form</h1>

<table style='width: 100%; margin: 0 auto; border: 1px solid; border-collapse: collapse;'>
<thead>
<tr>
<th style='font-size: 12px;text-align: center; width: 5%; font-weight: 200px; border: 1px solid black; background-color: #696969; color:white;'> LL ID </th>
<th style='line-height: normal; font-size: 12px;text-align: center; font-weight:200px;width: 70%; font-weight: 200px; border: 1px solid black; background-color: #696969; color: white;'>Recommendation</th>
<th style='font-size: 12px;text-align: center;width: 5%; font-weight: 200px; font-weight: 200px; border: 1px solid black; background-color: #696969; color:white;'>Checked When Verified</th>
<th style='font-size: 12px;text-align: center;width: 10%; font-weight:200px;font-weight: 200px; border: 1px solid black; background-color: #696969; color: white;'>Remarks</th>
</tr>
</thead>
<tbody >
" & Concat(
Gallery1.AllItems,
" <tr>
<td style=' padding-top: 5px; text-align: center;font-family: Arial, Helvetica, sans-serif; border: 1px solid black; color: grey;'><div class='remarks'><h5 style='font-weight:normal; font-size:13px;'>" & 'LL ID' & "</h5></div></td>
<td style='border: 1px solid black; padding-top: 5px;padding-right: 10px; padding-left:10px;color: grey;'><div class='remarks'><h5 style='text-align: justify; font-weight:normal; font-size:13px; '>" & Substitute(Substitute( Recommendation,Char(10)," <br> "),Char(13),"<br>") & "</h5></div></td><td style='border: 1px solid black;'></td><td style='border: 1px solid black;'></td></tr> "
) & "
</tbody>
</table>
<div class='footer'>
<p style='font-size: 13px;'>Approved By: </p>
</div>
</body>
</html>
"
Thank you for the help !

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

    Hi @lunalovegood ,

     

    I'm not sure what the space were your referring to, but first you can try:

    "<!DOCTYPE html>
<html>
<head>
<title>Checklist Interface</title>
</head>
<body>
<h1 style='font-size: 15px;text-align: center; font-weight:semibold;'>Lesson Learned Checklist Form</h1>

<table style='width: 100%; margin: 0 auto; border: 1px solid; border-collapse: collapse;'>
<thead>
<tr>
<th style='font-size: 12px;text-align: center; width: 5%; font-weight: 200px; border: 1px solid black; background-color: #696969; color:white;'> LL ID </th>
<th style='line-height: normal; font-size: 12px;text-align: center; font-weight:200px;width: 70%; font-weight: 200px; border: 1px solid black; background-color: #696969; color: white;'>Recommendation</th>
<th style='font-size: 12px;text-align: center;width: 5%; font-weight: 200px; font-weight: 200px; border: 1px solid black; background-color: #696969; color:white;'>Checked When Verified</th>
<th style='font-size: 12px;text-align: center;width: 10%; font-weight:200px;font-weight: 200px; border: 1px solid black; background-color: #696969; color: white;'>Remarks</th>
</tr>
</thead>
<tbody >
" & Concat(
Gallery1.AllItems,
" <tr>
<td style=' padding-top: 5px; text-align: center;font-family: Arial, Helvetica, sans-serif; border: 1px solid black; color: grey;'><div class='remarks'><h5 style='font-weight:normal; font-size:13px;'>" & Trim('LL ID') & "</h5></div></td>
<td style='border: 1px solid black; padding-top: 5px;padding-right: 10px; padding-left:10px;color: grey;'><div class='remarks'><h5 style='text-align: justify; font-weight:normal; font-size:13px; '>" & Substitute(Substitute( Trim(Recommendation),Char(10)," <br> "),Char(13),"<br>") & "</h5></div></td><td style='border: 1px solid black;'></td><td style='border: 1px solid black;'></td></tr> "
) & "
</tbody>
</table>
<div class='footer'>
<p style='font-size: 13px;'>Approved By: </p>
</div>
</body>
</html>
"

     

    Best regards,

  • lunalovegood Profile Picture
    lunalovegood 215 on at

    im sorry i didnt specify what space,

    lunalovegood_1-1696927670026.png

     


    as you can see above, there's an extra white space when the file is converted into pdf but when in the powerapps , it didnt show any white space like that 

    lunalovegood_0-1696927576990.png


    btw, i already tried update my code using your code, but no changes @v-jefferni 

  • v-jefferni Profile Picture
    v-jefferni Microsoft Employee on at

    Hi @lunalovegood ,

     

    Since it's displaying as normal in PowerApps, I think this issue is due to converting to PDF. How were you doing that?

     

    Besides, if you change font weight to light and font size to 10 px and remove top padding, would it be better?

    "<!DOCTYPE html>
<html>
<head>
<title>Checklist Interface</title>
</head>
<body>
<h1 style='font-size: 15px;text-align: center; font-weight:semibold;'>Lesson Learned Checklist Form</h1>

<table style='width: 100%; margin: 0 auto; border: 1px solid; border-collapse: collapse;'>
<thead>
<tr>
<th style='font-size: 12px;text-align: center; width: 5%; font-weight: 200px; border: 1px solid black; background-color: #696969; color:white;'> LL ID </th>
<th style='line-height: normal; font-size: 12px;text-align: center; font-weight:200px;width: 70%; font-weight: 200px; border: 1px solid black; background-color: #696969; color: white;'>Recommendation</th>
<th style='font-size: 12px;text-align: center;width: 5%; font-weight: 200px; font-weight: 200px; border: 1px solid black; background-color: #696969; color:white;'>Checked When Verified</th>
<th style='font-size: 12px;text-align: center;width: 10%; font-weight:200px;font-weight: 200px; border: 1px solid black; background-color: #696969; color: white;'>Remarks</th>
</tr>
</thead>
<tbody >
" & Concat(
Gallery1.AllItems,
" <tr>
<td style=' padding-top: 0px; text-align: center;font-family: Arial, Helvetica, sans-serif; border: 1px solid black; color: grey;'><div class='remarks'><h5 style='font-weight:light; font-size:11px;'>" & 'LL ID' & "</h5></div></td>
<td style='border: 1px solid black; padding-top: 0px;padding-right: 10px; padding-left:10px;color: grey;'><div class='remarks'><h5 style='text-align: justify; font-weight:light; font-size:11px; '>" & Substitute(Substitute(Recommendation,Char(10)," <br> "),Char(13),"<br>") & "</h5></div></td><td style='border: 1px solid black;'></td><td style='border: 1px solid black;'></td></tr> "
) & "
</tbody>
</table>
<div class='footer'>
<p style='font-size: 13px;'>Approved By: </p>
</div>
</body>
</html>
"

     

    Best regards,

  • v-jefferni Profile Picture
    v-jefferni Microsoft Employee on at

    Hi @lunalovegood ,

     

    Have you solved this problem?

     

    Best regards,

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

Quick Links

Season of Sharing Community Challenge Winners!

Congratulations to our community stars!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Congratulations to the June Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 342 Most Valuable Professional

#2
11manish Profile Picture

11manish 234

#3
Valantis Profile Picture

Valantis 187

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