I am not able to scroll down till last row. I have to use ↓ key to reach it.
Heights are variable for each row. Each row can show maximum 3 line of text.
<t:Table id="phraseTable"
class="phraseTable"
columnHeaderHeight="21"
enableColumnReordering="false"
selectionMode="Single"
cellClick="onCellClick"
visibleRowCountMode="Auto"
selectionBehavior="RowOnly"
rows="{dataModel>/phraseTable}"
>
<t:columns>
<t:Column hAlign="Center" resizable="true">
<Label text="No." wrapping="true" />
<t:template>
<Text class="PhrasesText"
wrapping="true"
textAlign="End"
text="{dataModel>Phrase_id}"
/>
</t:template>
</t:Column>
<t:Column hAlign="Center" resizable="true">
<Label text="Phrases" />
<t:template>
<FormattedText id="test"
class="maxlines PhrasesText"
htmlText="{dataModel>Phrase_desc}"
/>
</t:template>
</t:Column>
<t:Column hAlign="Center" resizable="true">
<Label class="headerClass commonSorting" text="Status" />
<t:template>
<Text class="PhrasesText"
wrapping="true"
text="{dataModel>Status_desc}"
/>
</t:template>
</t:Column>
<t:Column hAlign="Center" resizable="false">
<Label class="headerClass commonSorting" text="Geography" />
<t:template>
<Text class="Phrases"
wrapping="false"
text="{dataModel>Geography_desc}"
/>
</t:template>
</t:Column>
<t:Column hAlign="Center" resizable="false">
<Label class="headerClass commonSorting" text="Regulatory class" />
<t:template>
<Text class="Phrases"
wrapping="false"
text="{dataModel>Regulatory_desc}"
/>
</t:template>
</t:Column>
<t:Column hAlign="Center" resizable="false">
<Label class="headerClass commonSorting" text="Author" />
<t:template>
<Text class="PhrasesText"
wrapping="false"
text="{dataModel>Author_desc}"
/>
</t:template>
</t:Column>
</t:columns>
</t:Table>
CSS Used
.maxlines {
display: inline-block; /* or inline-block */
text-overflow: ellipsis;
word-wrap: break-word !important;
overflow: hidden !important;
max-height: 62.5px !important;
line-height: 16px !important;
text-align: left !important;
}