'Adding a divider to a HTML table structure

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.

htmlcsshtml-table


Solution 1:[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/

Solution 2:[2]

Maybe:

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

Solution 3:[3]

You can do this easily by CSS nth-child selector; see the CSS and HTML below:-

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

.my-info tr:nth-child(2) {
  border-bottom: solid 1px 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">Surname:</td>
      <td class="info-highlight">Surname</td>
    </tr>
    <tr>
      <td class="info-left">Email:</td>
      <td class="info-highlight">TheEmail</td>
    </tr>

  </tbody>

see the demo:- http://jsfiddle.net/TfK6Z/1/

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alexander Nied
Solution 2 Alexander Nied
Solution 3 Alexander Nied

Related Questions