When using Primeng table and set the table as scrollable the table should show the scrollbar and the text inside the cells should not be overflown. Instead this does not happen.
Check this example in Stackblitz and resize
Asked
Active
Viewed 7,012 times
0
-
the scrollbar will be shown if you set the scrollHeight for the table e.g scrollHeight="50px" – Hana Wujira Sep 19 '18 at 08:17
-
check the [link](https://stackblitz.com/edit/primeng-tables-tdmjix) – Hana Wujira Sep 19 '18 at 08:47
2 Answers
8
To avoid the text overflow in the cell you can add css style for td
td{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
update : to show the overflow text in next line
td{
word-break:break-all
}
Hana Wujira
- 870
- 7
- 17
-
-
you can use word-break:break-all to continue cell value in new line if that is what u need – Hana Wujira Sep 19 '18 at 08:37
-
I need to show text in same line. The text should be not hidden or overflown. – pantonis Sep 19 '18 at 09:01
-
you can use [resizable p-table](https://www.primefaces.org/primeng/#/table/colresize) – Hana Wujira Sep 19 '18 at 09:05
-
using this mode the user has to expand by him self the columns. This is not a solution. – pantonis Sep 19 '18 at 09:22
-
if you went the width of each cell to change based on the value it have i don't think that is possible cause it won't have a grid structure – Hana Wujira Sep 19 '18 at 09:25
-
This is what I am trying to achieve. https://getbootstrap.com/docs/4.0/content/tables/#always-responsive – pantonis Sep 19 '18 at 09:28
1
from primeNG ver 7 documents
Table Layout: . If you require cells to scale based on their contents set autoLayout property to true. Note that Scrollable and/or Resizable tables do not support auto layout due to technical reasons.
yehonatan yehezkel
- 1,116
- 18
- 28