I have a list in which the items are long string of characters. Due to this the Column titles are not perfectly aligned with item rows. The Column headers are not changing there original position and not getting aligned towards left as they normally do in normal list.

To give you a background i have freezed the header of a list using the below CSS:

 .ms-viewheadertr {
    display: block;
    float: left;

 .ms-listviewtable tbody {
    display: block;
    overflow: auto;
    height: 400px;

So before adding CSS they look like this :

enter image description here

After adding CSS:

enter image description here

I am looking to do this through CSS/JavaScript/Jquery preferably by Text wrap, increasing space between column or any other method.

Any help (SOLUTION/SUGGESTION/DISCUSSION/) is welcomed. Thanks.

  • Test with any proper words in department and description – Kumaraguru Oct 21 '16 at 7:27
  • I did same result. – Ahmed Oct 21 '16 at 8:42
  • Can you please provide screenshot of "how the headers should be look like?" – Kumaraguru Oct 21 '16 at 10:38
  • Actually i have just used this list as template .In real the list is pretty long so i have put it in a scroll pane ,freezing header row using .ms-viewheadertr. After adding the CSS in CEWP all the headers are bunching towards left as seen in second screenshot.Ideally it should look like the first screenshot(Headers alignned with row from left) even after adding CSS.So it should look like the first screenshot above.Sorry if i misunderstood your question .i will add another one if you want. – Ahmed Oct 21 '16 at 11:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.