如何添加单个短线，'|'作为html表中的列分隔符

Question

我有一个问题让我在过去的一天感到困惑。我必须创建一个像附加图像的表。我必须遵循CSS规则，但我无法弄清楚如何在EDIT和DELETE之间绘制单个黑条。我试过了|但它看起来不太正确。我为标题做了一个colspan = 2，并且在EDIT和DELETE之间的CSS中得到了灰色条。

我感谢您提出的任何建议。

Answer 1

我会像这样使用pseudo element来接近它：

button {
  border: 0;
  background: transparent;
  position: relative;
  padding: 0;
}

button + button {
  margin-left: 10px;
  padding-left: 10px;
}

button + button:after {
  content: '';
  width: 1px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: black;
}

<button>Edit</button>
<button>Delete</button>

Answer 2

将其添加到css中的“编辑”按钮：

  display: block;
  Padding: 0 10px;
  Border-right: 1px solid black;

Answer 3

td:after{
        content:"|";
        margin-left:5px; /*To make it look good*/
}

做这个