How to change column width in Sharepoint 2013 lists

Question

I have a custom list in Sharepoint 2013, I want to make title column wider,

How can I do that (step by step for dummies please), there are a lot of post in this site but I couldn't find the right answer.

Answer 1

The recommended way is to use Client Side Rendering. But that require little bit of developer background.

Next is using jQuery. For that follow below steps

1. First add required jQuery libraries to your site - Or you can dynamically load it using

   //Load jQuery library using plain JavaScript
   (function(){
     var newscript = document.createElement('script');
        newscript.type = 'text/javascript';
        newscript.async = true;
        newscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
     (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
   })();
   

2. Next use below script to change the Title column width to say 500px

   _spBodyOnLoadFunctionNames.push("AdjustTitleWidth");
   
   function AdjustTitleWidth(){
       jQuery("div.ms-vh-div[DisplayName='Title']").attr("style", "width: 500px");
   }               
   

How to apply this

1. Edit Page

2. Add Script Editor Web Part

3. Paste script