Adjust column widths in classic SharePoint lists using CSS (including “Quick Edit”/datasheet views)

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>