<!-- source: https://weapp.eteams.cn/build/techdoc/wdoc/index.html#/public/repository/b7c818b1-9132-46a7-bfaf-78fc6747791a/doc/271365932654264320 -->

**EB列表原生效果图**：

![image.png](../_assets/271365932654264320/001-72ff35c11e.png)

**调整后效果图**：![image.png](../_assets/271365932654264320/002-6750afe435.png)

调整步骤：

1. 代码块中粘贴表格整体样式css![image.png](../_assets/271365932654264320/003-4ab9cf5aef.png)

```css
/* 列表只读字段颜色 */
.weapp-ebdf-tablev-listview .ui-table-grid-td > span,
.weapp-ebdf-tablev-listview .ui-table-grid-td .ui-textarea {
  color: var(--ebproject-secondary-font-color);
}
/* 去除整体边框 */
.ui-table-grid {
  border: none;
}
/* 列头加入边框 */
.ui-table-grid thead.ui-table-grid-thead tr .ui-table-grid-th{
  border-color: var(--ebproject-page-table-header-border-color)!important;
  border: 1px solid;
}
/* 列头背景色 */
.ui-table-grid-th {
  background-color: var(--ebproject-page-table-header-bg-color);
}
/* 表格存在人员头像时css */
.edc-trans-data-style-avatar>.right .with-card:hover{
  color: var(--primary);
  text-decoration: none;
}

/* 如果顶部存在筛选，可额外复制以下css */
/* 筛选组件标题颜色 */
.ebcomponents-filter-search-quickComponentLabel,
.ebcomponents-filter-search-quickComponent .ebcomponents-filter-search-quickComponentLabel .ui-menu-select-title .ui-menu-select-title-text {
  color: var(--ebproject-primary-font-color);
}
```

2. 针对字段处理 - 主要字段（可点击）
  
  （1）在对应的主要字段处添加显示转换![image.png](../_assets/271365932654264320/004-a1caa1d36c.png)
  
  （2）配置显示转换为自定义html，并加入该字段的展示
  
  ![image.png](../_assets/271365932654264320/005-07e929cd43.png)
  
  （3）打开源码，手动给p标签添加class: sjrProject-customTable-column-primary![image.png](../_assets/271365932654264320/006-4f1e1d9a4a.png)
  
  ![image.png](../_assets/271365932654264320/007-da4eacb880.png)
  
  ！！！注意warning：**此处由于EB显示转换存在问题，如果打开源码修改后直接保存，本次编辑会不生效，需要再点击一下源码按钮后再保存才可以生效。正确的操作步骤**：![recording.gif](../_assets/271365932654264320/008-b362ad0e33.gif)
3. 针对字段处理 - 次要字段（可点击）：操作步骤同上，class修改为：sjrProject-customTable-column-regular
4. 针对字段处理 - 次要字段（不可点击）：
  
  配置动作时链接到空页面，可取消点击事件；如果需要把蓝色字体变灰（注：hover后鼠标展示为可点击效果目前该方案无法处理），操作步骤同上，class修改为：sjrProject-customTable-column-nohover
  
  ![image.png](../_assets/271365932654264320/009-2a7c5fd46d.png)
