向HTML表结构添加分隔符

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

名字：
名字
姓：
姓
电邮：
电子邮件

我想要的是一种像斜线/虚线一样的放置方式，或者只是在姓氏和电子邮件之间的一条线

我试过在a中使用

，但顶部和底部的间距太大。我也希望它看起来整洁紧凑。

也许：

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

姓：
姓

电邮：
电子邮件

我可能会这样做。当然，我是边界崩溃的超级粉丝

/CSS/

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

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

/HTML/

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

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

---

您好，您可以通过css第n个子选择器轻松完成此操作。请参见下面的css和html：-

css

.my-info td{
    padding:2px;
}

.my-info tr:nth-child(2) {
  border-bottom:solid 1px black;
}

HMTL

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

名字：
名字
姓：
姓
电邮：
电子邮件

---

请参见演示：-

此+1，但我会进一步推动它，只将类直接应用于tr一次。我们都知道IE7不能很好地使用tr样式，所以规则选择器应该是.bottomborder>td