用column-count将元素文字分成两列，两列之间怎么加一条边框

你可以使用 `::before` 或 `::after` 伪元素来实现两列之间的边框效果。具体实现方法如下：

.container {
  column-count: 2;
  column-gap: 20px; /* 列间距 */
  position: relative; /* 开启定位，为伪元素定位做准备 */
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 1px); /* 计算左边界位置 */
  width: 2px; /* 边框宽度 */
  background-color: #ccc; /* 边框颜色 */
}

在以上代码中，我们使用 `::before` 伪元素创建了一个宽度为 `2px` 的垂直边框，并将其定位到容器的中心位置。左边界位置计算使用了 `calc()` 函数，实际上是将容器的宽度除以 2 再减去边框宽度的一半。

需要注意的是，以上代码可能会因为某些浏览器的兼容性问题而无法正常工作。如果你需要在不同的浏览器中使用此效果，可以考虑使用其他的方法，比如使用 JavaScript 动态计算边框位置等。

相关问题

column属性分成的两列之间边框怎么加

您可以使用 CSS 中的 `border` 属性来为列之间添加边框。例如，如果您有一个带有两个列的表格，您可以使用以下 CSS 代码为列之间添加边框：

td {
  border: 1px solid black; /* 添加单像素黑色边框 */
}

td:first-child {
  border-right: none; /* 移除第一列右侧的边框 */
}

td:last-child {
  border-left: none; /* 移除最后一列左侧的边框 */
}

这段代码将为每个表格单元格添加 1 像素宽的黑色实线边框。然后，使用 `:first-child` 选择器和 `border-right` 属性将第一列的右边框移除，使用 `:last-child` 选择器和 `border-left` 属性将最后一列的左边框移除。这样，您就可以只在列之间添加边框，而不是在每个单元格周围添加边框。

vue el-table-column 一行两列循环

在Vue的el-table中，可以使用el-table-column来定义表格的列。如果需要一行两列循环，可以在el-table-column中使用template来定义两个slot，然后在数据循环中使用v-for来渲染两列数据。具体实现可以参考以下代码：

<el-table :data="tableData">
<el-table-column label="姓名">
<template slot-scope="scope">
<div>{{ scope.row.name }}</div>
</template>
</el-table-column>
<el-table-column label="年龄">
<template slot-scope="scope">
<div>{{ scope.row.age }}</div>
</template>
</el-table-column>
<el-table-column label="性别">
<template slot-scope="scope">
<div>{{ scope.row.gender }}</div>
</template>
</el-table-column>
<el-table-column label="地址">
<template slot-scope="scope">
<div>{{ scope.row.address }}</div>
</template>
</el-table-column>
</el-table>

在上面的代码中，我们定义了四个el-table-column，其中前两个用来渲染姓名和年龄，后两个用来渲染性别和地址。在每个el-table-column中，我们使用template来定义两个slot，然后在数据循环中使用v-for来渲染两列数据。