为什么Bootstrap Table列宽设置无效

最稳解法是table-layout: fixed与CSS类双保险：HTML表格加style="table-layout: fixed; width: 100%"，全局CSS定义.W120 .th-inner { width: 120px !important; min-width: 120px !important; }，columns中对应列设class: "W120"。

width属性在columns里写了但没反应

这不是你代码写错了，是Bootstrap Table默认渲染逻辑压过了你的设置。它内部用.th-inner包裹表头文字，并给这个元素设了width: auto !important，直接把你在columns里写的width值干掉了。Chrome开发者工具里点开<th>，一眼就能看到这条被覆盖的样式。

常见触发场景包括：表格启用了响应式（比如容器宽度不固定）、列里用了rowspan/colspan、或者父级<table>没设table-layout: fixed。

1. 别在<th>标签里写style="width:120px"或data-width——初始化时会被重绘覆盖
2. width字段只接受数字（如120）或带单位字符串（如"120px"），写"120%"在多数版本里不生效
3. 若依框架里还额外加了一层封装，columns配置必须走JS初始化，HTML里定义的data-* 属性基本无效

table-layout: fixed 是硬性前提

没有这句，其他所有列宽控制都是徒劳。浏览器默认用automatic布局，会按内容撑开列宽；而fixed才让列宽真正听你指挥。

必须同时满足三个条件：

1. 给<table>标签加style="table-layout: fixed"，不能只写在CSS类里（加载顺序可能晚于插件渲染）
2. 表格总宽度要明确，比如width: 100%或具体像素值，否则fixed没参照系
3. 所有列最好都设width，留空的列会被自动均分剩余空间，容易打乱预期布局

若依项目中常在bootstrapTable({})配置里加tableStyle: 'table-layout: fixed'，但更稳妥的是直接写在HTML的<table id="xxx">标签上。

formatter里套div能起效，但有副作用

当列内容过长导致列被撑开时，在formatter函数里用<div style="width: 200px; overflow: hidden">包住内容，确实能“视觉上”卡住宽度。但这只是内容截断，不是真改列宽。

1. 适合“操作”列这类纯图标/按钮，内容高度一致，不需要换行
2. 如果内容需换行显示，得额外加word-break: break-all或white-space: normal，否则文字会溢出
3. 注意：这种写法会让<td>实际宽度仍由表头<th>决定，若表头没控住，td里的div再窄也没用

最稳的解法：CSS类 + table-layout: fixed 双保险

别指望单点突破。实际落地时我只用这一套组合拳：

1. HTML表格标签上加style="table-layout: fixed; width: 100%"
2. 在全局CSS里定义.W120 .th-inner { width: 120px !important; min-width: 120px !important; }
3. columns里对应列写class: "W120"（若依封装版支持该字段），或用field名配CSS选择器#tableId th[data-field="xxx"]
4. 如果列有rowspan，优先用CSS方式，避免formatter干扰合并单元格结构

复杂点在于：若依不同版本对class字段的支持程度不一，有的要写成titleClass或cellStyle；另外!important层级太高，若页面引入了多个CSS文件，得确认你的样式加载在Bootstrap Table默认样式之后。