表格是展现行列数据较为清晰、高效的形式。对付表格列宽的设置，是关系到表格是否清晰、高效的一个主要方面。对付表格运用处景多且繁芜的B端产品来说，表格是数据的紧张展示形式之一，良好的表格列宽设置对提升产品体验非常主要。
一、先导性问题
在谈论表格列宽设置之前，须要先明确几个先导性问题。
1. 列数量
应尽可能将列数最小化。可根据实际业务需求，在表格中仅展示对用户决策有主要意义的字段，将更多详细字段纳入「详情」页。
如果业务需求具有分外性，列数难以精简时，则可以考虑在表格内利用横向滚动条。
不要通过紧缩列宽度来增加更多的列数量。
2. 列的内边距
得当的内边距将使表格列宽设置效果更优。各列的内边距应适中且统一，太大会造成表格横向空间的摧残浪费蹂躏，太小会造成内容拥挤，缺少呼吸感。
3. 列内字符数
列内字符数对付表格的列宽设置具有积极的参考浸染。表格中所展示的构造化数据，常日是严格地遵照数据格式与长度规范的。因此，对付列内的字符数，是可以结合实际的业务数据进行预估的。
对每一列字符数的预估，常日有以下两种情形：
字符数的确定性较高，能够准确预判出字符数；字符数的确定性较低，仅能够预估出一个宽泛的范围。4. 表格的宽度表格的宽度常日有两种设置办法，一是固定宽度，二是跟随浏览器窗口自适应。这两种表格宽度的设置办法，将会对列宽设置产生不同的影响。其余需把稳的是，当总列宽小于表格宽度时，末了一列的右侧会涌现空缺列；当总列宽大于表格宽度时，则会涌现横向滚动条。
二、列宽设置办法
表格列宽设置常日有三种办法，
不特意进行设置，列宽根据内容自适应；列宽以百分比设置；列宽以固定的像素单位设置。1. 列宽自适应表格列宽的自适应，常日是根据各列可见的最长的字符数，按比例进行分配的（详细需看底层框架的实现情形）。在列宽自适应时，总列宽不会小于表格宽度，常日恰好即是表格宽。只有昔时夜部分或所有列紧缩至极限时，才可能涌现总列宽大于表格宽度的情形，才会涌现横向滚动条。
1）优点
实现大略，不须要对每一列的列宽进行设置。灵巧，可自动根据内容进行调节。2）缺陷
表格的显示情形具有较大的不愿定性，可能会涌现某些列过度紧缩的情形。在有分页时，每一页表格的列宽可能不一致，会涌现视觉上的跳跃。3）适宜场景
表格利用场景较少且大略。相对付表格宽度来说，列数不多，无需利用横向滚动条。2. 列宽以百分比设置表格列宽以百分比设置时，可结合实际的业务数据对字符数进行预估，据此给出各列所占百分比。无论表格宽度为固定值，还是跟随浏览器窗口自适应，都需担保所有列的百分比之和大于即是100%。
1）最小列宽
将表格列宽设置为最小宽度，是一种分外设置办法，这能够避免涌现列过度紧缩的情形。在实际列宽大于最小列宽时，列宽将以百分比的办法进行分配。
例如，当 Column 1 的最小宽度为100px，Column 2 的最小宽度为200px，Column 3 的最小宽度为300px，则当各列的实际列宽大于最小列宽时，三列的列宽比将按照1:2:3进行分配，即 Column 1 占 17%，Column 2 占 33%，Column 3 占 50%。
2）优点
表格宽度跟随浏览器窗口自适应时，列宽能够自动调度。比较于列宽自适应，能够避免涌现列宽被过度压缩的情形。3）缺陷
表格宽度跟随浏览器窗口自适应时，可能会涌现某些列有横向空间摧残浪费蹂躏，某些列却横向空间不敷。
4）适宜场景
表格利用场景较少且大略，无需风雅设置列宽度。
3. 列宽以固定的像素单位设置
列宽以固定的像素单位设置时，表格的显示情形，是完备可以预知的。各列宽可根据实际的业务数据对字符数进行预估。列宽需根据表格宽度设置办法来进行设置：
当表格宽度为固定值时，为每一列设置得当的固定宽度值即可，但需担保总列宽大于即是表格宽度。
列宽度取值建议：为字符数的确定性较高的列，设置刚刚得当的列宽度；为字符数的确定性较低的列，根据字符数范围取一个较富余的列宽度。
当表格宽度跟随浏览器窗口自适应时，需为个中至少一列设置最小宽度，让其跟随浏览器窗口自适应，以担保总列宽始终不小于表格宽度；别的各列设置得当的固定宽度值。
列宽度取值建议：为字符数的确定性较高的列，设置刚刚得当的列宽度；为字符数的确定性较低的列设置最小宽度，让其跟随浏览器窗口自适应。
以上列宽取值建议为一种大略便捷的办法，在实际运用时，可根据情形适当调度，以取得更和谐的显示效果。如在有横向空间盈余的情形下，为各列适当增加留白空间。
1）优点
完备可控，可避免繁芜场景中难以预见的极度显示效果。可结合横向滚动条，优化表格列数过多时的显示情形。2）缺陷
3）适宜场景
三、单元格内字符溢出处理
表格单元格内的字符溢出处理，是表格列宽设置过程中必将面临的一个问题。在表格场景中，比较常见的字符溢出处理办法是换行和截断。
鉴于用户常日对表格数据具有快速地扫视与比拟的需求，建议优先利用换行的溢出处理办法。但当换行超过2行时，会占用过多高度，表格将丢失易读性。因此，建议在换行超过2行时截断，鼠标悬停时利用tooltip显示完全内容。
对付核心字段列，以及重复率较高的字段列，应担保其在默认状态下的识别度，避免在截断后，因暴露的字符数过少或重复度极高而失落去识别性。
四、手动调节列宽
手动调节列宽扩展了表格的适应性，以符合更繁芜多变的场景。手动调度某一列的宽度后，别的列宽度的适应性取决于列宽的设置办法，详细如下：
列宽以自适应办法设置时，某一列的宽度被手动调节后，会导致别的各列的宽度按比例自动进行调度。列宽以百分比设置时，某一列的宽度被手动调节后，别的列的宽度不受影响。调度后，如果列宽百分比之和大于100%，则涌现横向滚动条；如果列宽百分比之和小于100%，则在末了一列的右侧会涌现空缺列。列宽以固定的像素单位设置时，某一列的宽度被手动调节后，别的列的宽度不受影响。调度后，如果列宽之和大于表格宽度，则涌现横向滚动条；如果列宽之和小于表格宽度，则在末了一列的右侧会涌现空缺列。1）最小列宽
如果列宽设置为最小列宽，手动调节列宽时仍可将列宽缩小至最小列宽以下。但当其它列在手动调度时，设置了最小列宽的列，只能被压缩至最小列宽。
2）把稳事变
对付列宽以百分比设置和以固定像素单位设置时，为了避免涌现空缺列的情形，应选择一列为其设置最小宽度。对付具有手动调节列宽功能的表格，建议利用截断的溢出处理办法，不要换行，这在用户手动调节列宽时，能避免涌现表格因行高变革而涌现的高下跳动。3）适宜场景
表格利用场景较多且繁芜。
五、结语
从提升开拓效率的角度来说，表格列宽的设置办法应有一个全局统一的设置办法。从适应性的广泛度来说，列宽以固定的像素单位设置的办法更适宜表格运用处景较多的B端产品。
本文由@xulu 原创发布于大家都是产品经理。未经容许，禁止转载
题图来自 Unsplash，基于 CC0 协议
