scroll.x
指定scroll.x
为固定宽度或百分比。x表示表格实际宽度,当表格实际宽度大于表格视觉宽度时,可滚动。
x为固定宽度:
指定各列固定宽度或百分比,并且需要配合表格固定宽度scroll.x
使用,如scroll: { x: 1500 }
。当非固定列宽之和大于表格宽度时,可滚动查看。
-
列为固定宽时,在不同大小屏幕上的表现效果不一样(非自适应布局)
-
列为百分比时,效果和列为固定宽一样,因为表格总宽度一样,也就是
scroll.x
为固定值1500
x为百分比 100%:
- 列为固定宽时,超出视觉大小会滚动
- 列为百分比时,屏幕大小变化时可按
scroll.x
的宽度自适应,这种方案不存在滚动条
百分比+百分比的缺点:缩放到太小,可能会出现文字换行的情况
自适应最佳实践:
- 想每一列自适应屏幕宽度,则
scroll.x百分比
+列百分比
(屏幕太小时,内容太多的列可能会出现文字换行) - 为了解决文字换行问题,可指定这个列为固定宽度
让列宽统一
列为百分比时,参考栅格布局,可以按最多12列来划分100%的宽度,单列为8%的宽度,这会让表格更好看。留4%是为了适应自适应布局。
// 可按最多12列来划分。非固定类总宽度为96%,留4%是为了适应自适应布局
export const SINGLE_COLUMN_WIDTH = '8%';
export const DOUBLE_COLUMN_WIDTH = '16%';
export const THREE_COLUMN_WIDTH = '24%';
export const FIVE_COLUMN_WIDTH = '40%';