Increase column width in a list view web part

Question

How can I increase the column width in a list view web part?

Answer 1

I couldn't resize the grabby part in the th without breaking it, but this works in a Content Editor Web Part:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  setTimeout(function(){
    $("th[title='Title']").css({"width":"400px"})
  }, 2000)
})
</script>

Answer 2

1. Open the List in Sharepoint designer and then select column (header of the column) of which you wish to increase the width and select the properties for that and select CSS Style to open the styling window and then set the width in it.

   1. Then from the top bar menu select "Insert Tab" then from it select "Customize XSLT-> Customize entire view"

   2. Goto the header of the column from the markup view and find something like "<th nowrap="nowrap" scope="col" onmouseover="OnChildColumn(this)">" tag for that column and remove - nowrap="nowrap"

and save it and test, it would work fine!

Answer 3

There is a workaround to set the column width, but it will effect all columns.

Check the CSS of ListViewWebPart's Html Table (via view source code or IE Dev toolbar)

Consider, ListViewWebPart's Table class name is - .msTable

Then write an inline CSS in your aspx page like

.msTable TD
{
   width:80px;
}

The above code will set the width fixed for column inside ListViewWebPart.