html - 向 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 />在 a 内，但顶部和底部的间距太大。我也希望它看起来整洁紧凑。

Answer 1

我可能会做这样的事情。当然，我是 border-collapse 的忠实粉丝。

.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/ http://jsfiddle.net/wHmyx/