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.

[jeremyeperdue]

To modify the style, this was the only approach that worked listed in this question. This is the start to exactly what I was looking for. Thank you.

[jeremyeperdue · Accepted solution]

Look into bootstrap. I have completely reworked the HTML to remove the tables and take advantage of bootstrap.

[yundlu316]

hey Jeremy, I'm running into the same issue...what do you mean by taking advantages of bootstrap?   How did you style the ui_reference using bootstrap?   Thanks!