Adding a divider to a HTML table structure

Question

I have the following setup in 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>

What I am after is a means of placing like a beveled line/dashed line or just a line between the Surname and Email.

I have tried <hr /> inside a but the spacing top and bottom is too much. I want it too look neat and compact.

Answer 1

I'd probably do something like this. Of course, I'm a big fan of 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/