向 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 里面，但是顶部和底部的间距太大了。我也希望它看起来整洁紧凑。

原文由 tonyf 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 jeremysawesome 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 iambriansreed 发布，翻译遵循 CC BY-SA 4.0 许可协议