PageBlock Table Column Value Trimming

Question

I have used the below code to show a list view. How can I apply text trimming (ellipse) for the description column to avoid multiple?

<apex:listViews type="contact"/ >

1. Is there any CSS style to achieve this?
2. Can we make the column header resized by using CSS?

Answer 1

Answer to Question One:

Rows that result from the apex:listViews component (not the header row) are assigned the dataRow class, and the children elements can either be td or th, so we can use the following CSS snippet to set the text-overflow property to ellipsis if the "Description" column is the third column:

.dataRow > *:nth-child(3) {
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Answer to Question Two:

The header row is assigned the headerRow class, so we can use the font-size property to increase the font size of the header column, or we can change the padding-bottom or padding-top properties to manipulate the height of the header row relative to the contents of the header cells.

.headerRow > th {
    font-size: 1em !important;
    padding-bottom: 8px !important;
    padding-top: 10px !important;
}

Furthermore, we can change the width of individual header columns (the following example changes the width of the third column) using the following example:

.headerRow > th:nth-of-type(3) {
    width: 500px;
}