Primeng datatable - column headers spill out of cell on window resize

Question

This stackblitz shows the issue very well when one resizes window https://stackblitz.com/edit/primeng-tablepage-demo-5lnvaa?file=src/app/app.component.html

In the p-table, the headers look fine if I have the browser window full size and stretch out the viewing area as far as possible. If I resize the browser window or viewing area to be smaller, then the column headers overlap into each other and the last one spills outside of the table. This is the exact same behavior happening when I resize the browser window in my project to be slightly smaller. Any ideas how to prevent this spillage from happening?

After resize

Answer 1

For starters, 7% and 8% is just too narrow for a column width in the example... But this might have been for demo purpose?

Here a simple solution:

In your css file:

tr {
  word-break: break-all;
  padding: .5rem;
}

Add it to your component:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['app.component.css']
})

You can probably style it some more, but this should get you started.

I would also give the table a min width, so it wouldn't go too narrow and shows a scroll bar when the screen gets smaller.