Angular表格表头需横向排列：宽度/nowrap/横向滚动失效求助

• 检查表格容器布局
  确保表格外层容器未设置overflow:hidden，给容器添加横向滚动并设置表格宽度：

  .table-container {
    overflow-x: auto;
    width: 100%;
  }
  .table-container table {
    width: 100%; /* 或设置固定总宽度，比如1200px */
    table-layout: fixed; /* 强制按设定列宽分配空间，避免内容挤压 */
  }
  

• 给表头单元格设置宽度与不换行规则
  为<th>指定宽度，配合CSS强制文本不换行，避免重叠：

  .table-container th {
    width: 150px; /* 根据实际内容调整宽度 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 可选，超出部分显示省略号 */
    padding: 8px; /* 增加内边距，避免文本过于拥挤 */
  }
  

• 处理Angular样式隔离问题
  如果组件内样式不生效，可使用::ng-deep穿透样式隔离（注意Angular版本兼容性），或把样式写入全局样式文件：

  ::ng-deep .table-container th {
    white-space: nowrap;
    width: 150px;
  }
  

• 弃用原生nowrap属性
  原生nowrap属性优先级低于CSS，直接用white-space: nowrap控制更可靠。

内容的提问来源于stack exchange，提问作者NEMO-THE-CODING-KING