Changing Jelly CSS

[jeremyeperdue]

How can I change the padding and width of the ServiceNow fields below:

I would like to increase or decrease the reference fields width and pad between each.

<table>
   <p>When a user account is locked, follow KB Article: 402546<br />Please verify the manager and have IAM-OPs re-enable the password.</p>
   <hr />
   <tr>
   <td align="center">Spoke to Manager :</td>
   <td>
   <g:ui_reference name="manager_name" table="sys_user" query="nameNOT LIKEDept_Shared" completer="AJAXTableCompleter" columns="u_rj_user_name;department" width="250" />
   </td>
   </tr>

   <tr>
   <td align="center">Verified Manager's Identity :</td>
   <td align="left"><g:ui_checkbox name="verified_manager" value="${false}" mandatory="true"/></td>
   </tr>

   <tr>
   <td align="center">Obtained New Expiration Date :</td>
   <td><g:ui_date name="password_expiration_date" value="${sysparm_start_date}" /></td>
   </tr>

   <tr>
   <td align="center">IAM-OPS Associate :</td>
   <td><g:ui_reference name="iamops_name" id="reference_fields" table="sys_user" query="nameNOT LIKEDept_Shared" completer="AJAXTableCompleter" columns="u_rj_user_name;department" /></td>
   </tr>
</table>

I have tried a bunch of different things to modify the spacing and I can't get anything to work so I removed that from the code above. except the cellspacing and cellpadding which clearly doesn't work or I am doing something wrong.

[tanumoy]

I have added cellspacing="15" cellpadding="25" in the <table> tag and removed the same thing from <tr> tag.

[jeremyeperdue]

Yeah, I tried that too 😕

Thank you for the efforts thus far. I believe, because I am using the <g:fieldnamewhateverhere jelly tags, ServiceNow's CSS is overwriting mine.

[Gurpreet07]

Following may help a little in padding but ..   not able to set width

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<table border="0" style="text-align:left;">  

  <p>When a user account is locked, follow KB Article: 402546<br />Please verify the manager and have IAM-OPs re-enable the password.</p>  

  <hr />  

  <tr>  

  <td>Spoke to Manager :</td>  

  <td   style="padding:5px; width:200px;">  

  <g:ui_reference name="manager_name" table="sys_user" query="nameNOT LIKEDept_Shared" completer="AJAXTableCompleter" columns="u_rj_user_name;department" width="250" />  

  </td>  

  </tr>  

  <tr>  

  <td>Verified Manager's Identity :</td>  

  <td   style="padding:5px; width:200px;"><g:ui_checkbox name="verified_manager" value="${false}" mandatory="true"/></td>  

  </tr>  

  <tr>  

  <td>Obtained New Expiration Date :</td>  

  <td   style="padding:5px; width:200px;"><g:ui_date name="password_expiration_date" value="${sysparm_start_date}" /></td>  

  </tr>  

  <tr>  

  <td>IAM-OPS Associate :</td>  

  <td style="padding:5px; width:200px;"><g:ui_reference name="iamops_name" id="reference_fields" table="sys_user" query="nameNOT LIKEDept_Shared" completer="AJAXTableCompleter" columns="u_rj_user_name;department" /></td>  

  </tr>  

</table>  

</j:jelly>

[jeremyeperdue]

I appreciate the help. Being this is XHTML, the style="padding:5px; width:200px; syntax fails.

[epam]

I suggest to define the table style in <style> tags and use the attribute 'class' more effectively. Please, look at the screenshots below:

Your page will be look as you want i think: