How to make table width fix so it will not starch towards right in Servicenow HTML

[Deepti Singh Ba]

Hi All,

I am looking for the solution on one HTML-CSS part, for an Email Client Template.
When I am defining table on the source code its not fixing the table size/width based on the length of the value the row has.

Please find the below screenshot for more details.

how can we fix the table length toward right so that it would take the maximum length only till marked in red in the image above.

[Mohith Devatte · Accepted solution]

Hello @Deepti Singh Ba ,

can you please share the email script where you are trying to render the table ? 

may be i might be able to help you with table classes to adjust the length of table automatically by adding few classes

[Deepti Singh Ba · Accepted solution]

Hi @Mohith Devatte ,
Please find the email template script source below:
<p><img style="align: baseline;" title="" src="sys_attachment.do?sys_id=9bb660b31bbc21107968620f6e4bcb0d" alt="" width="740" height="145" align="baseline" border="" hspace="" vspace="" /></p>
<p><span style="font-size: 10pt; font-family: verdana, geneva;">This is an outage notice communicating service unavailability or changes to services during a Digital Services <br />Change Request. This provides context on potential impacts caused by this change.</span></p>
<table class="MsoTableGrid" style="border-collapse: collapse; border: none; height: 97px;" border="1" width="737" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height: 15px;">
<td style="width: 254.779px; border: 1pt solid #0070c0; padding: 0in 5.4pt; height: 15px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt;"><strong><span style="font-family: Verdana, sans-serif;">What is going to happen?</span></strong></span></span></td>
<td style="width: 450.964px; border-top: 1pt solid #0070c0; border-right: 1pt solid #0070c0; border-bottom: 1pt solid #0070c0; border-image: initial; border-left: none; padding: 0in 5.4pt; height: 15px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt; font-family: Verdana, sans-serif;">${mail_script:outagedetails}</span></span></td>
</tr>
<tr style="height: 15px;">
<td style="width: 254.779px; border-right: 1pt solid #0070c0; border-bottom: 1pt solid #0070c0; border-left: 1pt solid #0070c0; border-image: initial; border-top: none; padding: 0in 5.4pt; height: 15px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt;"><strong><span style="font-family: Verdana, sans-serif;">What is impacted?</span></strong></span></span></td>
<td style="width: 450.964px; border-top: none; border-left: none; border-bottom: 1pt solid #0070c0; border-right: 1pt solid #0070c0; padding: 0in 5.4pt; height: 15px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt; font-family: Verdana, sans-serif;">${u_unavailablefunctions}</span></span></td>
</tr>
<tr style="height: 15px;">
<td style="width: 254.779px; border-right: 1pt solid #0070c0; border-bottom: 1pt solid #0070c0; border-left: 1pt solid #0070c0; border-image: initial; border-top: none; padding: 0in 5.4pt; height: 15px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt;"><strong><span style="font-family: Verdana, sans-serif;">Who is impacted?</span></strong></span></span></td>
<td style="width: 450.964px; border-top: none; border-left: none; border-bottom: 1pt solid #0070c0; border-right: 1pt solid #0070c0; padding: 0in 5.4pt; height: 15px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt; font-family: Verdana, sans-serif;">${u_affectedcustomers}</span></span></td>
</tr>
<tr style="height: 15px;">
<td style="width: 254.779px; border-right: 1pt solid #0070c0; border-bottom: 1pt solid #0070c0; border-left: 1pt solid #0070c0; border-image: initial; border-top: none; padding: 0in 5.4pt; height: 10px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt;"><strong><span style="font-family: Verdana, sans-serif;">When will this happen?</span></strong></span></span></td>
<td style="width: 450.964px; border-top: none; border-left: none; border-bottom: 1pt solid #0070c0; border-right: 1pt solid #0070c0; padding: 0in 5.4pt; height: 10px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt; font-family: Verdana, sans-serif;">Between ${begin} and ${end}</span></span></td>
</tr>
<tr style="height: 15px;">
<td style="width: 254.779px; border-right: 1pt solid #0070c0; border-bottom: 1pt solid #0070c0; border-left: 1pt solid #0070c0; border-image: initial; border-top: none; padding: 0in 5.4pt; height: 10px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt;"><strong><span style="font-family: Verdana, sans-serif;">Change Request</span></strong></span></span></td>
<td style="width: 450.964px; border-top: none; border-left: none; border-bottom: 1pt solid #0070c0; border-right: 1pt solid #0070c0; padding: 0in 5.4pt; height: 10px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt; font-family: Verdana, sans-serif;">${task_number}</span></span></td>
</tr>
</tbody>
</table>
<p><span style="font-size: 10pt; font-family: verdana, geneva;">For additional information, please contact Service D</span><span style="font-size: 10pt; font-family: verdana, geneva;">esk.</span> <span style="margin: 0in; line-height: normal; font-size: 11pt;">&nbsp;</span></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

[RaghavSh · Accepted solution]

Below should work for you :

I have added style ="table-layout: fixed;word-break: break-all" in your table css.

<p><img style="align: baseline;" title="" src="sys_attachment.do?sys_id=9bb660b31bbc21107968620f6e4bcb0d" alt="" width="740" height="145" align="baseline" border="" hspace="" vspace="" /></p><p><span style="font-size: 10pt; font-family: verdana, geneva;">This is an outage notice communicating service unavailability or changes to services during a Digital Services <br />Change Request. This provides context on potential impacts caused by this changes.</span></p><table class="MsoTableGrid" style="border-collapse: collapse; border: none; height: 97px; table-layout: fixed;word-break: break-all;" border="1" width="737" cellspacing="0" cellpadding="0"><tbody><tr style="height: 15px;"><td style="width: 254.779px; border: 1pt solid #0070c0; padding: 0in 5.4pt; height: 15px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt;"><strong><span style="font-family: Verdana, sans-serif;">What is going to happen?</span></strong></span></span></td><td style="width: 450.964px; border-top: 1pt solid #0070c0; border-right: 1pt solid #0070c0; border-bottom: 1pt solid #0070c0; border-image: initial; border-left: none; padding: 0in 5.4pt; height: 15px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt; font-family: Verdana, sans-serif;">${mail_script:outagedetails}</span></span></td></tr><tr style="height: 15px;"><td style="width: 254.779px; border-right: 1pt solid #0070c0; border-bottom: 1pt solid #0070c0; border-left: 1pt solid #0070c0; border-image: initial; border-top: none; padding: 0in 5.4pt; height: 15px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt;"><strong><span style="font-family: Verdana, sans-serif;">What is impacted?</span></strong></span></span></td><td style="width: 450.964px; border-top: none; border-left: none; border-bottom: 1pt solid #0070c0; border-right: 1pt solid #0070c0; padding: 0in 5.4pt; height: 15px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt; font-family: Verdana, sans-serif;">${u_unavailablefunctions}</span></span></td></tr><tr style="height: 15px;"><td style="width: 254.779px; border-right: 1pt solid #0070c0; border-bottom: 1pt solid #0070c0; border-left: 1pt solid #0070c0; border-image: initial; border-top: none; padding: 0in 5.4pt; height: 15px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt;"><strong><span style="font-family: Verdana, sans-serif;">Who is impacted?</span></strong></span></span></td><td style="width: 450.964px; border-top: none; border-left: none; border-bottom: 1pt solid #0070c0; border-right: 1pt solid #0070c0; padding: 0in 5.4pt; height: 15px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt; font-family: Verdana, sans-serif;">${u_affectedcustomers}</span></span></td></tr><tr style="height: 15px;"><td style="width: 254.779px; border-right: 1pt solid #0070c0; border-bottom: 1pt solid #0070c0; border-left: 1pt solid #0070c0; border-image: initial; border-top: none; padding: 0in 5.4pt; height: 10px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt;"><strong><span style="font-family: Verdana, sans-serif;">When will this happen?</span></strong></span></span></td><td style="width: 450.964px; border-top: none; border-left: none; border-bottom: 1pt solid #0070c0; border-right: 1pt solid #0070c0; padding: 0in 5.4pt; height: 10px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt; font-family: Verdana, sans-serif;">Between ${begin} and ${end}</span></span></td></tr><tr style="height: 15px;"><td style="width: 254.779px; border-right: 1pt solid #0070c0; border-bottom: 1pt solid #0070c0; border-left: 1pt solid #0070c0; border-image: initial; border-top: none; padding: 0in 5.4pt; height: 10px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt;"><strong><span style="font-family: Verdana, sans-serif;">Change Request</span></strong></span></span></td><td style="width: 450.964px; border-top: none; border-left: none; border-bottom: 1pt solid #0070c0; border-right: 1pt solid #0070c0; padding: 0in 5.4pt; height: 10px; text-align: left; vertical-align: top;" valign="middle"><span style="margin: 0in; line-height: normal; font-size: 11pt;"><span style="font-size: 10pt; font-family: Verdana, sans-serif;">${task_number}</span></span></td></tr></tbody></table><p><span style="font-size: 10pt; font-family: verdana, geneva;">For additional information, please contact Service D</span><span style="font-size: 10pt; font-family: verdana, geneva;">esk.</span> <span style="margin: 0in; line-height: normal; font-size: 11pt;">&nbsp;</span></p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

[Deepti Singh Ba]

Than you for the quick response. I have added both the Class and style parameter on table attribute and it is working as expacted.