SharePoint – Use JQuery to set Column Width

Hello everyone. Today I was asked to alter the column width of some SharePoint Web Parts to improve the look and feel of a site. I altered the column width with a simple Javascript and JQuery.

Here is an example how the Web Parts of the site looked before I added my script:


Not pretty but luckily there is a simple way to change that.

Here is the script code:

<script src="/sites/test/Scripts/jquery.min.js"></script>
<script language="javascript">
$("'Name')").css("width", "300px");

With the above script you can alter the width of any column you want. You simply need to replace “Name” in the script with the Display Name of your Column.

To use the script you need to add a Content Editor Web Part to your site and embed your script in it.


After you have applied your script to the site your site will look like this:


Looks better than before, right? Well, that´s it. That´s all you need to do. I hope you liked my post. See you next time.


Tagged ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: