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

Question

我想找出一种可靠的方法将字符（如=符号）放在表格单元格的边框上。我最终没有显示边框，但为了更清楚，我已经截取了我想在下面做的事情。

表格中的数据可能与图片中显示的数据不同，因此表格单元格可能更宽或更瘦。有没有办法以某种方式使用边框本身作为某种参考位置来定位字符？

我尝试在其上方添加一行，然后使用position: relative将字符向下移动，但这不可靠。也没有在它上面放置一张不同的表格。

Answer 1

这是使用css ::before伪选择器的解决方案：

HTML：

<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>

的CSS：

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: "=";
}

您必须使用witdh内容上的left和::before属性稍微玩一下。我希望left: -5px能够在width: 10px中保持良好状态，但事实并非如此。不知道为什么。

Example fiddle

---

如果您希望=符号成为实际内容的一部分，您可以执行以下操作：

HTML：

<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>

的CSS：

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;
}

（看起来太小width是以前解决方案中没有正确对齐居中的罪魁祸首。

Example fiddle

Answer 2

是的！有一种古老的学校方法。隐藏边框，然后添加所需字形的背景图像。或添加更多隐藏边框的列。

Answer 3

有几种不同的方法可以实现这一目标，但这是我刚刚做过的快速Fiddle。

<强> 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>

<强> CSS：

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
}