问题
表格编写有一个非常大的难点是设置单元格列宽度,如何设定一个最佳的宽度,能既不浪费空间又能将内容显示完整呢?
有时候很难确定单元格里的内容,会不会有一天突然变多或变少,所以设定一个固定的数值,第一是需要人工操作,增加工作量,第二是难以100%设置准确
能不能让列宽自己适应内容长度呢?比如excel的自动调整列宽这样的能力
方案
其实html的表格本身是支持自适应宽度的,每列的宽度取列中最长内容的宽度
具体做法可参考还在用文本超出隐藏吗?竟然有这么多缺点-固定宽度还是自适应宽度
但是,这种特性有一定的限制:表格需要是一个完整的表格
举个例子,像是表头固定,表格内容滚动这种是不能使用的
当前使用的ant design表格,如果使用了固定表头、左列锁定或右列锁定,会将一个完整的表格拆分成多个表格
此时如果再使用上述列宽自适应特性,会导致表头和列对不齐
能不能在一个表格里实现固定表头这些功能呢?
效果
将现有表格改造成单一的表格,兼容表头固定,左右列锁定,支持列宽自适应
原表格内置的表头固定、左右列锁定、表格多选以及表格样式这些需要重写或优化