Need to modify the width of a SharePoint column in a view? jQuery!

Posted on 2013/07/27 | 6 Comments

I recently had a request on one of my sites to increase the size of the Description column in the SharePoint views. Out of the box, there’s no easy way to do that. But, with a little snippet of jQuery placed in a Content Editor Web Part on the page with the view, you can easily change any of the column widths…

Here’s the code I used:

<!--ADJUST TABLE COLUMN WIDTH-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$("div.ms-vh-div:contains('Description')").css("width", "350px");});</script>

If you have multiple columns to modify, just repeat the line with the “div.” string. This is so simple, my customer went in and made her own changes to the code.

Many thanks to Mark Miller, who provided the solution in the post SharePoint jQuery: Setting View Column Width.

This entry was posted in SharePoint 2010. Bookmark the permalink.

6 responses to “Need to modify the width of a SharePoint column in a view? jQuery!”

Dorean | 2013/12/12 at 12:27 pm | Reply

Thank you! Thank you! Thank you!
Mohammed Ruman | 2016/06/21 at 9:29 pm | Reply

Works!
Thank you 🙂
Rhea | 2017/02/03 at 12:53 pm | Reply

Hi, I tried applying this but it doesn’t seem to be working in edit mode or datasheet view mode? Has someone encountered the same problem?
Neha | 2017/05/29 at 8:35 pm | Reply

Yes.. It is not working in quick edit mode
SagarPilli | 2017/09/08 at 5:48 am | Reply

how can make this script available across all the Views
Carlo | 2018/03/28 at 9:12 am | Reply

In order to get this to work, you have to add a script editor web part to your page and embed the script snippet.