将分隔符添加到HTML表结构

Question

我在MS IE8中进行了以下设置:

 <table class="my-info">
    <tbody>
        <tr>
            <td class="info-left">First name:</td>
            <td class="info-highlight">FirstName</td>
        </tr>
        <tr>
            <td class="info-left">Surname:</td>
            <td class="info-highlight">Surname</td>
        </tr>
        <tr>
            <td class="info-left">Email:</td>
            <td class="info-highlight">TheEmail</td>
        </tr>
    </tbody>
 </table>

我所追求的是一种放置方式,如斜线/虚线或只是在姓氏和电子邮件之间的一条线.

我试过<hr />里面但是顶部和底部的间距太大了.我希望它看起来整洁而紧凑.

Answer 1

我可能会做这样的事情.当然,我是边境崩溃的忠实粉丝.

/ CSS /

.my-info {border-collapse: collapse;}
.bottom-border { border-bottom: 1px dashed black; }

/ HTML /

<table class="my-info">
    <tbody>
    <tr>
        <td class="info-left">First name:</td>
        <td class="info-highlight">FirstName</td>
    </tr>
    <tr>
        <td class="info-left bottom-border">Surname:</td>
        <td class="info-highlight bottom-border">Surname</td>
    </tr>
    <tr>
        <td class="info-left">Email:</td>
        <td class="info-highlight">TheEmail</td>
    </tr>
    </tbody>
</table>

/ JSFiddle / http://jsfiddle.net/wHmyx/

Answer 2

也许:

    <tr>
        <td class="info-left">Surname:</td>
        <td class="info-highlight">Surname</td>
    </tr>
    <tr>
        <td colspan="2" class="divider"><hr /></td>
    </tr>
    <tr>
        <td class="info-left">Email:</td>
        <td class="info-highlight">TheEmail</td>
    </tr>