css中如何设置element ui 表格中的表头文字和行内文字对齐，图标在外面位置

要在 Element UI 表格中将图标放在单元格的左侧或右侧，并使表头文字和行内文字居中对齐，可以使用以下 CSS 样式：

.el-table th, .el-table td {
  text-align: center;
}

.el-table th .cell {
  display: flex;
  align-items: center;
}

.el-table th .cell .el-icon {
  margin-right: 5px; /* 图标与文字之间的距离 */
}

.el-table td .cell {
  display: flex;
  align-items: center;
}

.el-table td .cell .el-icon {
  margin-right: 5px; /* 图标与文字之间的距离 */
}

这样就可以将表头和行内的文字居中对齐，并在单元格的左侧或右侧放置图标了。其中，`align-items: center` 属性用于将图标和文字垂直居中对齐，`display: flex` 属性用于创建一个弹性布局，使得图标和文字可以放在同一行内。`margin-right` 属性用于控制图标与文字之间的距离，可以调整为合适的数值。

相关问题

css中如何设置element ui 表格中的表头文字和行内文字对齐

可以使用 CSS 的 text-align 属性来设置表格中表头文字和行内文字的对齐方式。例如，要将表格中的文字居中对齐，可以在样式中添加以下代码：

.el-table th, .el-table td {
  text-align: center;
}

这样就可以将表格中的表头和行内文字都居中对齐了。如果要将文字左对齐或右对齐，只需要将 text-align 属性的值改为 left 或 right 即可。

css中如何设置element ui 表格中 row-key文字和表头文字对齐，而 row-key的图标在外面没

要实现这个效果，你可以通过 CSS 修改表格的样式。具体步骤如下：

1. 打开 Chrome 浏览器，进入你的网页，打开开发者工具。

2. 在开发者工具中，找到表格的 row-key 列和表头文字对应的标签。

3. 使用 CSS 对这两个标签进行样式修改，使它们对齐。具体样式可以根据你的实际情况进行修改。

4. 如果 row-key 的图标在外面，可以通过设置该图标的位置为 absolute，并设置它的 left 和 top 属性调整它的位置。

下面是一个示例代码，你可以根据需要进行修改：

/* 表格 row-key 列对齐 */
.el-table__row {
  display: flex;
  align-items: center;
}

.el-table__row .cell {
  display: flex;
  align-items: center;
}

/* 表头文字对齐 */
.el-table__header-wrapper th {
  display: flex;
  align-items: center;
}

.el-table__header-wrapper th .cell {
  display: flex;
  align-items: center;
}

/* 调整 row-key 图标位置 */
.el-table__row .expand-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

希望这个回答能够帮到你。如果还有问题，可以继续追问哦~