On occasion you may wish to change the column width within a SharePoint view. Many of the posts that I have seen recommend opening the view in SharePoint Designer and modifying the HTML script. To me this is cumbersome and the best solution I found that actually worked involved adding a webpart to the page where the view appears that changes the column sizes.
Here are the steps
Create a .txt file to define the column width
Create a .txt file(Say ChangeColumnWidth.txt) containing the code below:
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js“></script>
<script type=”text/javascript”>
$(document).ready(function()
{
$(“TH.ms-vh2:contains(‘Description’)”).css(“width”, “300px”); // Add these lines for each column you wish to resize
$(“TH.ms-vh2:contains(‘Title’)”).css(“width”, “200px”); // Add these lines for each column you wish to resize
});
</script>
Upload the .txt file to a document library in SharePoint
Open the view who column widths you wish to change
I created a new view as shown below (Note the width of both the ‘Title’ and ‘Description’ fields)
Edit the page and add a Content Editor Web Part to the view
Edit the page and then add a content editor web part by following the steps 1,2 and 3 and then clicking on OK
Update the Web Part to refer to the file previously uploaded
Edit the web part by selecting the Edit Web Part option in the menu on the right hand side of the Content Editor Web Part.
Update the Content Link to reference the URL for the Text File that you previously uploaded (You can get this link by opening the file from the document library in SharePoint and copying the URL)
(https://contoso.sharepoint.com/sites/dev/Shared%20Documents/ChangeColumnWidth.txt)
Click on the ‘OK’ button when done
Stop editing the list
Save your changes by stopping the edit
Your columns now display in the correct width