Html 在表格单元格的边框上放置字符

我想找出一种可靠的方法，将字符（如=符号）放置在表格单元格边框的顶部。我最终不会显示边界，但为了让这更清楚，我在下面放了一个我想做的截图

表格中的数据可能与图片中显示的不同，因此表格单元格可能更宽或更薄。是否有任何方法可以使用边框本身作为某种参考位置，将角色定位在其上方

---

我尝试在上面添加一行，然后使用

position:relative

向下移动字符，但这不可靠。也不是在上面放一张不同的桌子。

是的！有一种老式的方法。隐藏边框，然后添加所需图示符的背景图像。或者添加更多隐藏边框的列

有几种不同的方法可以实现这一点，但我刚刚做了一个简单的例子

HTML:

<table>
    <tr>
        <th>Total gal.<span class="right">=</span></th>
        <th>% of solution<span class="right">=</span></th>
        <th>Total gal. of solution</th>
    </tr>
</table>

table {
    border: none;
    border-collapse: collapse
}
table tr { border: 1px  solid #ccc }
table th { width: 125px }
.title { text-align: center }
.right {
    float: right;
    padding: 0
}

---

下面是一个使用css

：：before

伪选择器的解决方案：

html:

您必须在

：before

内容上的

witdh

和

left

属性上玩一会儿。我预期代码>左：-5px在中间保持良好，<>代码>宽度：10px，但没有。不知道为什么

---

如果希望

=

符号成为实际内容的一部分，可以执行以下操作：

html:

（看起来太小，

宽度

是之前解决方案中未正确对齐中心的罪魁祸首）

---

.

我花了一点时间，认为我应该对你的

：在基于
的答案之前（没有足够的差异来保证另一个答案）：@DavidThomas不确定所有额外属性的确切功能，但看起来不错！如果你把它变成一个答案，我会投你一票@等等，我现在明白了：你去掉了硬编码的等号。哈哈。这有点多，不是吗？；-）我喜欢白色的背景，虽然打破了边界。可能吧，但它看起来确实很漂亮…；）@大卫托马斯真的是这样！
<table>
    <tr>
        <td>Some text</td>
        <td>Some text</td>
        <td>Some text</td>
    </tr>
    <tr>
        <td>Some text</td>
        <td>Some text</td>
        <td>Some text</td>
    </tr>
</table>

table {
    border-collapse: collapse;
}
table td {
    position: relative;
    padding: 20px;
    text-align: center;
    border: 1px solid #000;
}
td:not(:first-child)::before {
    position: absolute;
    width: 10px;
    left: -8px;
    text-align: center;
    content: "=";
}

<table>
    <tr>
        <td>Some text <span>=</span></td>
        <td>Some text <span>=</span></td>
        <td>Some text</td>
    </tr>
    <tr>
        <td>Some text</td>
        <td>Some text</td>
        <td>Some text</td>
    </tr>
</table>

table {
    border-collapse: collapse;
}
table td {
    position: relative;
    padding: 20px;
    text-align: center;
    border: 1px solid #000;
}
table td span {
    position: absolute;
    display: inline-block;
    width: 20px;
    right: -10px;
    text-align: center;
}