HTML Table data alignment issue

Question

The issue, I am having here, is with the Description value within the Details column. When the items names are too long, I see the whole value drops to the next line. What I am trying to do is having the row header, which is Description, and the value on the same line, but if it is too long, the word is wrapped it.

<table style="font-family:sans-serif; font-size: 14px; padding-left:10px; padding-right:10px; width: 100%;">
  <colgroup>
    <col span="1" style="width: 50%;" />
    <col span="1" style="width: 10%;" />
    <col span="1" style="width: 20%;" />
    <col span="1" style="width: 20%;" />
  </colgroup>
  <thead>
    <tr style="background-color: #f2f2f2;">
      <th style="border: 1px solid rgb(231, 229, 229); padding: 5px;">Details</th>
      <th style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">Qty</th>
      <th style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">Unit Price</th>
      <th style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">Subtotal</th>
    </tr>
  </thead>
  <tbody>
    <tr style="font-size: 14px;">
      <td style="border: 1px solid rgb(231, 229, 229); padding: 5px;">
        <b>Code: </b>{!item.Product_Name__r.ProductCode}
        <br/>
        <b>Description: </b>{!item.Product_Name__r.Name}
        <br/>
        <b>Category: </b>{!item.Product_Family__c}
      </td>
      <td style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">{!FLOOR(item.Quantity__c)}</td>
      <td style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">${!item.Unit_Price__c}</td>
      <td style="border: 1px solid rgb(231, 229, 229); padding: 5px; text-align: center;">${!ROUND(item.Unit_Price__c * item.Quantity__c, 2)}</td>
    </tr>
  </tbody>
</table>

Here is the updated screenshot of the output -

@SathvikC Yes I have tried, that didn't make any difference. I have added a new snip of the output. Why is just that one item having this issue. I checked the data, I dont see any issues there. — Sumchans
– Sumchans, Commented May 14 at 17:38
In order for CSS to break a word, it typically looks for spaces in the text. If the text doesn't contain any spaces, it won't automatically break or wrap the word. Maybe try using overflow-wrap: anywhere; — Sathvik C
– Sathvik C, Commented May 14 at 20:55
It will be easy if you can provide a working snippet with actual data — Sathvik C
– Sathvik C, Commented May 14 at 20:55

ideallifegenerator · Accepted Answer · 2025-05-19 08:34:26Z

3

You can try overflow-wrap: anywhere; or add space right after ","

edited May 19 at 8:34

answered May 14 at 17:44

ideallifegenerator

1001 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sathvik C May 14 at 21:40

@sumchans You might want to use overflow-wrap: anywhere; instead, it’s more appropriate for breaking long, unbroken words in the typical text. line-break: anywhere; is mainly intended for CJK (Chinese, Japanese, Korean) text and may cause unexpected breaks in English content.

Community May 15 at 0:15

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

user30064482 · Accepted Answer · 2025-05-14 17:59:42Z

0

Replace this.

<td style="border: 1px solid rgb(231, 229, 229); padding: 5px; white-space: normal; word-wrap: break-word;">

<span><b>Description:&nbsp;</b>{!item.Product_Name__r.Name}</span>

answered May 14 at 17:59

user30064482

11 bronze badge

2 Comments

AztecCodes May 14 at 19:29

Welcome to StackOverflow! Congratulations to your first answer and thank you for contributing to this community. Please read the following guide if you want to learn more on: How To: Write a good answer

Sathvik C May 14 at 21:34

Welcome to Stack Overflow, and congrats on posting your first answer! 🎉

Collectives™ on Stack Overflow

HTML Table data alignment issue

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related