表格列宽自适应方案

135 阅读1分钟

问题

表格编写有一个非常大的难点是设置单元格列宽度,如何设定一个最佳的宽度,能既不浪费空间又能将内容显示完整呢?

有时候很难确定单元格里的内容,会不会有一天突然变多或变少,所以设定一个固定的数值,第一是需要人工操作,增加工作量,第二是难以100%设置准确

能不能让列宽自己适应内容长度呢?比如excel的自动调整列宽这样的能力

方案

其实html的表格本身是支持自适应宽度的,每列的宽度取列中最长内容的宽度

具体做法可参考还在用文本超出隐藏吗?竟然有这么多缺点-固定宽度还是自适应宽度

但是,这种特性有一定的限制:表格需要是一个完整的表格

举个例子,像是表头固定,表格内容滚动这种是不能使用的

当前使用的ant design表格,如果使用了固定表头、左列锁定或右列锁定,会将一个完整的表格拆分成多个表格

此时如果再使用上述列宽自适应特性,会导致表头和列对不齐

能不能在一个表格里实现固定表头这些功能呢?

纯css实现固定表头和锁定列

效果

将现有表格改造成单一的表格,兼容表头固定,左右列锁定,支持列宽自适应

原表格内置的表头固定、左右列锁定、表格多选以及表格样式这些需要重写或优化