HTML 表格中间只有破折号

Question

我想在表格中间画一条破折号。第一张图是我现在的状态，第二张图是我想要的样子。我如何获得线路？

 <table>
    <tbody>
    <tr>
        <td>
            <img src="https://thunder.cdn.overdrive.com/logos/crushed/1211.png?1" alt="Logo" />
        </td>
        <td>
            <strong><font color=darkgrey>Tel.:</font></strong> <font color=grey>+44(0) XXX</font>
            <br/>
            <strong><font color=darkgrey>E-Mail:</font></strong> <font color=grey>xxx@xxx.com</font>
            <br/>
            <strong><font color=darkgrey>Web:</font></strong> <font color=grey>www.xxx.com</font>
        </td>
    </tr>
    </tbody>
    </table>

Answer 1

你只需要使用 border-left 属性来创建一条灰色虚线:

border-left: 2px dotted grey;

您会注意到它正好在文本上，所以下一步是添加 padding-left 以将文本从虚线移开。

工作示例:

#add {
    border-left: 2px dotted grey;
    padding-left: 14px;
}

 <table>
    <tbody>
    <tr>
        <td>
            <img src="https://thunder.cdn.overdrive.com/logos/crushed/1211.png?1" alt="Logo" />
        </td>
        <td id="add">
            <strong><font color=darkgrey>Tel.:</font></strong> <font color=grey>+44(0) XXX</font>
            <br/>
            <strong><font color=darkgrey>E-Mail:</font></strong> <font color=grey>xxx@xxx.com</font>
            <br/>
            <strong><font color=darkgrey>Web:</font></strong> <font color=grey>www.xxx.com</font>
        </td>
    </tr>
    </tbody>
    </table>

您也可以内联执行此操作:

<td style="border-left: 2px dotted grey; padding-left: 14px;">

同样重要的是创建一个 id 而不是仅仅使用 td 元素，否则你会得到这个结果:

td {
    border-left: 2px dotted grey;
    padding-left: 14px;
}

 <table>
    <tbody>
    <tr>
        <td>
            <img src="https://thunder.cdn.overdrive.com/logos/crushed/1211.png?1" alt="Logo" />
        </td>
        <td>
            <strong><font color=darkgrey>Tel.:</font></strong> <font color=grey>+44(0) XXX</font>
            <br/>
            <strong><font color=darkgrey>E-Mail:</font></strong> <font color=grey>xxx@xxx.com</font>
            <br/>
            <strong><font color=darkgrey>Web:</font></strong> <font color=grey>www.xxx.com</font>
        </td>
    </tr>
    </tbody>
    </table>

(会出现两条虚线)