Larget html tables in Knowledge articles appearing as truncated in Service Portal


Description

Symptoms


When you have larger html tables within the article body field of Knowledge article, they appear as truncated in the Service Portal as shown below,

This article will brief on how to fix this display issue on Service Portal. 

Release


Any supported release. 

Cause


Service Portal is using responsive design and hence actually the larger HTML table is not truncated, instead, there is a scroll bar provided at the end of the page as shown in the below screenshot.

This is because the "article body" field is an HTML field in which larger HTML table is defined, and hence the system will consider the whole article body field content as one text and provide horizontal scroll bar at the end of the text.

Resolution


This is working as per the product design. However, if you would like to introduce an additional horizontal scroll bar only specific to the larger HTML table within the "article body" field, you can consider updating the HTML source of the table with below structure,

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

You can do this via going to the affected article in the backend and select the HTML table in HTML editor and click on "source" icon and update the HTML of the table as shown below.

After the above-mentioned modifications, the larger HTML table would be rendered with additional horizontal scroll bar specific to the table as shown in the below screenshot,

 

Additional Information


How to design responsive tables

Create a Knowledge Article