Primeng 数据表 - headers 列在 window 调整大小时溢出单元格

Question

这个 stackblitz 很好地展示了调整大小时的问题 window https://stackblitz.com/edit/primeng-tablepage-demo-5lnvaa?file=src/app/app.component.html

在 p-table 中，如果我有浏览器 window 全尺寸并尽可能地拉伸查看区域，headers 看起来不错。如果我将浏览器 window 或查看区域调整得更小，那么列 headers 会相互重叠，最后一列会溢出到 table 之外。当我将项目中的浏览器 window 调整为略小时，这与发生的行为完全相同。任何想法如何防止这种溢出发生？

调整大小后

Answer 1

对于初学者来说，示例中的 7% 和 8% 对于列宽来说太窄了...但这可能是为了演示目的？

这里有一个简单的解决方案：

在您的 css 文件中：

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

将其添加到您的组件中：

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

您可能还可以设计更多样式，但这应该能让您入门。

我还会给 table 一个最小宽度，这样它就不会变得太窄，并且在屏幕变小时显示滚动条。

Primeng 数据表 - headers 列在 window 调整大小时溢出单元格

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

primeng

angular

primeng-datatable