Primeeng 数据表 - 调整窗口大小时列标题溢出单元格

Question

当调整窗口大小https://stackblitz.com/edit/primeng-tablepage-demo-5lnvaa?file=src/app/app.component.html

时，这个stackblitz很好地显示了这个问题

在 p 表中，如果我的浏览器窗口是全尺寸并且尽可能地伸展查看区域，则标题看起来不错。如果我将浏览器窗口或查看区域的大小调整为更小，那么列标题会相互重叠，最后一个会溢出到表格之外。这与我将项目中的浏览器窗口大小调整为稍小时发生的行为完全相同。任何想法如何防止这种溢出发生？

调整大小后

Answer 1

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

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

在您的 css 文件中：

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

将其添加到您的组件中：

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

您可能可以设计更多样式，但这应该会让您开始。

我还会给表格一个最小宽度，这样当屏幕变小时它不会太窄并显示滚动条。