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>[email protected]</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>[email protected]</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>[email protected]</font>
            <br/>
            <strong><font color=darkgrey>Web:</font></strong> <font color=grey>www.xxx.com</font>
        </td>
    </tr>
    </tbody>
    </table>

（会出现两条虚线）