CSS Challenge Response: Text alignment for SharePoint list

A CSS Challenge from Justin:

Make Sharepoint Custom Lists align to the right. By default any Dollar or Percentage type columns align to the right.

Here is the CSS to control your SharePoint list text alignment!
The first selector (.ms-listviewtable tr.ms-viewheadertr th) can be removed or broken out to a different style statement to control the header text alignment separately.

/* Set text alignment */
	.ms-listviewtable tr.ms-viewheadertr th, /* Header cells */
	.ms-listviewtable > tbody > tr td /* Data cells */ {
		text-align: right;

If you want to change the alignment of the percentage and currency columns (it has a default right alignment) you just need to add one more element to the selector:

/* Change text alignment for default right aligned cells */
	.ms-listviewtable > tbody > tr td div /* Data cells */ {
		text-align: left;

3 thoughts on “CSS Challenge Response: Text alignment for SharePoint list”

  1. This code doesn’t seem to be working for the columns with dollars or percentages. It only works for the text on the page.

    1. I have updated the post to include the modification you need to target percentages and currencies. By default they appear right aligned so the second CSS statement above will shift it to be left aligned.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.