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以将文本从虚线移开。

工作示例：

＆＃13;

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

＆＃13;

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

＆＃13;

你也可以内联这样做：

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

同样重要的是创建id并且不仅仅使用td元素，否则您将获得此结果：

＆＃13;

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

＆＃13;

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

＆＃13;

（将出现两条虚线）

HTML表只在中间划线

1 个答案: