Once upon a time two years ago (two years?!?) I shared how you can adjust SharePoint column widths in traditional views using JQuery.
But adjusting the same widths in datasheet mode (quick edit, for example) is a bit different. After a bit of fiddling around, I found an answer that will allow you to adjust column widths for both standard and datasheet view types using just CSS.
The difference is in how you reference the column names in the css:
- Standard (catches both filterable and non-filterable columns such as multi-line text): th.ms-vh2-nofilter div[DisplayName=’Column1′],th.ms-vh2 div[DisplayName=’Column1′]{…
- Datasheet: th[Title=’Column1′] {…
Everything that follows that first line is the same in both types of views, fixing a minimum and regular width property for the column(s).
Standard Views (not quick edit)
<style>
th.ms-vh2-nofilter div[DisplayName='Justification'],th.ms-vh2 div[DisplayName='Justification']{
min-width:500px!important;
width:500px!important;
}
</style>Datasheet/Quick Edit Views
<style>
th[Title='Justification']{
min-width:500px!important;
width:500px!important;
}
</style>All Views
So if you’re including just one script reference for all views in your list, you’d be safe to include all formats in the script.
<style>
th[Title='Justification'],th.ms-vh2-nofilter div[DisplayName='Justification'],th.ms-vh2 div[DisplayName='Justification']{
min-width:500px!important;
width:500px!important;
}
</style>Multiple columns
For multiple column width adjustments, just include another block for each column as seen here:
<style>
th[Title='Justification'],th.ms-vh2-nofilter div[DisplayName='Justification'],th.ms-vh2 div[DisplayName='Justification']{
min-width:500px!important;
width:500px!important;
}
th[Title='Other Column'],th.ms-vh2-nofilter div[DisplayName='Other Column'],th.ms-vh2 div[DisplayName='Other Column']{
min-width:200px!important;
width:200px!important;
}
</style>
I jokingly said at a recent presentation that I thought adding weather to our intranet’s home page was a good idea for employees like me who work in the basement and don’t see much of “the outside.” But it can also help with planning and decisions depending on your industry and daily routines.
