如何为form.io data-grid组件添加横向滚动条及自定义列宽？

使用Form.io的data-grid组件时，列数较少（2-3列）时显示正常：

但当列数增加到6-7列时，列宽会被压缩，数据难以辨认：

以下是两种解决思路：

一、添加横向滚动条 #

通过自定义CSS为data-grid容器开启横向滚动：

1. 定位data-grid的外层容器，其默认类名为formio-component-datagrid
2. 添加如下CSS样式：

.formio-component-datagrid .table-responsive {
    overflow-x: auto;
    min-width: fit-content;
}

当表格宽度超出容器范围时，会自动出现横向滚动条，支持左右滑动查看所有列。

二、自定义每列宽度 #

方式1：通过组件配置添加自定义类 #

1. 在Form.io编辑器中选中目标列，进入「自定义CSS类」设置项
2. 为该列添加自定义类名（如custom-column-width）
3. 在全局CSS中定义对应宽度：

.custom-column-width {
    width: 180px !important; /* 根据需求调整数值 */
}

方式2：直接通过CSS选择器指定列 #

无需单独配置类，可通过列索引或字段名直接设置宽度：

/* 针对第3列设置宽度 */
.formio-component-datagrid table tr td:nth-child(3),
.formio-component-datagrid table tr th:nth-child(3) {
    width: 200px !important;
}

/* 针对字段名为`email`的列设置宽度 */
.formio-component-datagrid table th[data-key="email"],
.formio-component-datagrid table td[data-key="email"] {
    width: 220px !important;
}

内容的提问来源于stack exchange，提问作者vijay s