表格中ngx-select-dropdown组件宽度设置CSS不生效问题

样式不生效是三个问题叠加导致的：

• CSS语法错误：你写的样式末尾多了一个多余的闭合大括号，会导致整段CSS解析失败
• 选择器写法错误：.ngx-dropdown-button是ngx-select-dropdown组件的内部子元素，你用逗号分隔选择器代表匹配二者为同级节点，根本选不到组件内部的按钮元素
• Angular样式隔离：默认组件样式为Emulated隔离模式，组件内写的普通选择器无法作用于第三方组件的内部DOM元素，同时你只设置了max-width没有设置固定宽度，加上表格默认自适应布局会压缩列宽，最终导致尺寸调整失效

1. 首先删掉CSS里多余的闭合大括号，修正选择器层级。如果是在当前组件的样式文件里写样式，用::ng-deep实现样式穿透，同时补全宽度属性，必要时加!important覆盖组件自带样式：

/* 调整下拉触发按钮宽度 */
:host ::ng-deep ngx-select-dropdown .ngx-dropdown-button {
  width: 220px !important;
  min-width: 220px;
  max-width: 220px;
}
/* 同步调整下拉展开面板宽度，避免和触发按钮宽度不一致 */
:host ::ng-deep ngx-select-dropdown .ngx-dropdown-list-container {
  width: 220px !important;
  min-width: 220px;
}

如果不想用::ng-deep，可以把上面两段样式写到项目全局的styles.css文件里，去掉:host ::ng-deep前缀即可。

注意：如果加了上述样式还是被组件原有样式覆盖，可以适当提高选择器优先级，比如在选择器前补充上层父容器的类名即可，不需要重复加多层!important。

2. 调整表格布局避免列宽被压缩，给承载下拉框的表格元素补充样式：

/* 给包含下拉组件的单元格设置最小宽度，避免被自适应压缩 */
td {
  min-width: 230px;
}
/* 如果不需要列宽随内容自适应，可以直接给表格设置固定布局 */
table {
  table-layout: fixed;
}

调整完成后下拉组件的宽度就会正常生效。

内容的提问来源于stack exchange，提问作者Yan