CODEWITHSUNDEEP
htmlcsshtml-table
user7597016
user7597016

Reputation:

HTML table only dash in the middle

I would like to make a dash in the middle of a table. The first picture shows my current state and the second picture shows how I would like it. How do I get the line? 

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

PIC1 PIC2

Upvotes: 1

Views: 431

Answers (1)

Xantium
Xantium

Reputation: 11605

You just need to use border-left property to create a dotted grey line:

border-left: 2px dotted grey;

You will notice that that goes right on the text, so the next step is to add padding-left to move the text away from the dotted line.

Working example:

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

You can do this inline as well:

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

It is also important to create an id as well and not just use td element or you will get this result: 

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>

(two dotted lines will appear)

Upvotes: 1

Related Questions