是否可以将字符放置在表中显示的边框上?

Question

是否可以将字符放置在表中显示的边框上?

我正试图找到一种方法来重新创建音乐人员符号的网页使用html，而不是插入图像。

我实际上已经得到了工作人员本身渲染精细，5条水平线被竖条分割使用这个在我的css标题:

table.musStaff{border-collapse:collapse;}
.trms{border-bottom:2px solid black;}
.tdms{border-left:2px solid black;}

，这是我需要渲染的音乐人员:

<table class="musStaff">
    <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
    <tr class="trms"><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
    <tr class="trms"><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td class="tdms">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td class="tdms">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
    <tr class="trms"><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td class="tdms">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td class="tdms">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
    <tr class="trms"><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td class="tdms">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td class="tdms">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
    <tr class="trms"><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td class="tdms">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td class="tdms">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
    <tr><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td></tr>
</table>

所有 仅作为临时占位符。

所以我的问题是我需要能够将&#9679字符表示上的行以及行之间，由<tr class="trms"> (border-bottom:2px solid black)呈现。

除此之外，我想我可以走了。

Answer 1

这是你想要达到的目标吗?

HTML

<div><span>o</span></div>

CSS

div {
    border-right: 1px solid black;
    display: inline-block;
    font-size: 20px;
    line-height: 20px;
    height: 1em;
    position: relative;
    width: 1em;
}
span {
    position: absolute;
    right: -5px;
}

jsfiddle

Answer 2

如果你愿意深入了解css定位的细节和跨浏览器问题，你可以将任何东西定位到你喜欢的任何地方。

例如:

<td style="position:relative; top:-12px">&#9679</td>

http://jsfiddle.net/markm/2ft3ojbn/

如果我在做这个，然而，我会认真考虑使用svg或画布而不是html和css -这是这些工具的任务类型。最后，它将更易于维护和可读性。它也将更容易编程。事实上，已经有一些库可以提供帮助——例如:
http://www.vexflow.com