Unanswered

Formatting html table -> force the column width

Like (0) Share

Report

Posted on 18 May 2023 03:24:41 by Vivian_Liu_

I am facing an issue that when the value of the cell is too long, it will automatic make my column width wider, and the last column's value will disappear.

but i want to fix the column width , if the word is too long, it woll automatically turn to new line, so the format can be more neat.
Below is my html code and picture of the result.

"<table width=""300"" cellspacing=""0"" cellpadding=""0"">
<tr>
<td width=""50""><b>Name </b></td>
<td width=""50"">123456789</td>
<td width=""50""><b>BrandID: </b></td>
<td width=""50"">123456789</td>
<td width=""50""><b>WorkdayID: </b></td>
<td width=""50"">jjjjjjjjjjjjjjjjjjj</td>
</tr>
<tr>
<td colspan=""1"">&nbsp;</td>
</tr>
<tr>
<td ><b>FormID: </b></td>
<td >tttttttttttttttttt</td>
<td ><b>FlowID: </b></td>
<td >ddddddddddddddddddddddddddddddddddddddddddd</td>
<td ><b>Title:</b></td>
<td>gggggggggggggggggggggggggggggg</td>
</tr>


</table>
</form>
"

what i want :

Categories:

Using Apps Using Formulas

General Questions

All responses (3)

Answers (0)

Tony_Bowes_BP 280 on 19 May 2023 at 03:00:28

Like (0)

Report

Re: Formatting html table -> force the column width

Hmm, I was assuming you were outputting the HTML to a report or email or something. If you're attempting to use HTML to manually build out a form inside a canvas app you're in for a world of hurt as you'll be fighting against the responsive design, the auto-scaling, etc, and missing out on most of the useful features that the WYSIWYG interface is trying to do for you.
Is there something stopping you from just using labels and read-only textboxes to quickly knock up a form or screen with the same look & feel?
Vivian_Liu_ 10 on 18 May 2023 at 07:48:04

Like (0)

Report

Re: Formatting html table -> force the column width

I thought that powerapps can't write css, but only inline css?
Tony_Bowes_BP 280 on 18 May 2023 at 07:24:37

Like (0)

Report
Re: Formatting html table -> force the column width

HTML table width and height are only minimums, not fixed. A table will expand to allow data to fit or to take up more space that hasn't been explicitly allocated.

There are a couple of ways to limit the text inside the data elements to abide by the dimensions imposed
A) Use CSS Style Overflow and Text overflow. CSS Overflow (w3schools.com)
B) Use Display:Inline-block to allow word wrapping
C) Use Table-layout:fixed to only focus on the top row of widths

Here's a starter:
table th,td { width: 15%; height: 50px; display: inline-block; overflow:hidden; }

You might want to try with W3school's inline editor to get the proper outcome you want: W3Schools Tryit Editor
Remember to try with multiple screen resolutions and browser widths too.